Как в WordPress создать модальное (всплывающее) окно. Модальное окно активируется после нажатия кнопки

Контекстное меню (PopupMenu ), вызываемое в приложении Windows по щелчку правой кнопкой мыши, является стандартной и удобной возможностью многих программ. Delphi компонент PopupMenu предназначен для создания таких контекстных меню . Контекстное меню из-за способа своего появления называют ещё всплывающим меню .

Delphi компонент PopupMenu почти не отличается от компонента MainMenu и также является невизуальным. Но в отличие от Главного меню, которое одно на Форме, всплывающие меню могут быть у каждого объекта, размещённого на Форме. Поэтому нужно разместить на Форме и запрограммировать столько компонентов PopupMenu , сколько контекстных меню предполагается использовать в программе. Кроме того, контекстное меню не имеет нескольких пунктов верхнего уровня, так как все его пункты располагаются в одном вертикальном столбце.

После того как компонент PopupMenu размещён на Форме, структура меню формируется совершенно аналогично созданию Главного Меню (компонент MainMenu). Далее, для того, чтобы контекстное меню определённого объекта (например, компонента StringGrid) вызывалось в программе, необходимо свойству PopupMenu этого объекта присвоить имя соответствующего Delphi компонента PopupMenu:

В момент появления контекстного меню происходит событие onPopup компонента PopupMenu. В этот момент можно, исходя из анализа ситуации, внести необходимые изменения в его параметры.

Щёлкнув по объекту правой кнопкой мыши, мы получим появление его контекстного меню, обеспеченного компонентом PopupMenu1 , в точке произведённого щелчка. Но можно добиться его появления в любом нужном нам месте Формы. Достигается это использованием метода Popup компонента PopupMenu, при этом свойство Popup у соответствующего компонента (в данном случае StringGrid) нужно очистить.

Для использования этого метода необходимо использовать событие щелчка правой кнопки мыши по объекту. И правильнее использовать именно отпускание кнопки, то есть событие onMouseUp нужного объекта. Метод Popup имеет параметры X и Y, соответствующие расстоянию точки щелчка по горизонтали и вертикали от верхнего левого угла экрана соответственно. То есть, можно добиться появления меню вообще за пределами Формы. Вот, попробуйте использовать такой код:

procedure
begin
if Button = mbRight then PopupMenu1.Popup(0, 0); //появление меню в точке (0, 0)
end ;

Но и обработчик события onMouseUp тоже имеет параметры X и Y. Они соответствуют расстоянию точки щелчка по горизонтали и вертикали от верхнего левого угла уже Формы . Однако, если попытаться использовать их в методе Popup , то меню не появится в том месте, где вы ожидаете. Чтобы добиться нужного эффекта, необходимо учитывать также положение самой Формы, а также того объекта, в пределах которого должно появляться меню. Но и это не всё. Необходимо к значению X добавить высоту заголовка Формы, которая неизвестна. Все эти слагаемые усложняют код.

Избавиться от большинства слагаемых поможет функция GetClientOrigin . Она вызывается без параметров и возвращает сдвиг клиентской области Формы относительно верхнего левого угла экрана в формате TPoint (точка, то есть запись с полями X и Y). Таким образом, остаётся учесть только положение нужного объекта. Следующий код обеспечивает появление меню именно в месте щелчка мышки по компоненту StringGrid1:

procedure TForm1.StringGrid1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
var P: TPoint;
begin
P:=GetClientOrigin;
if Button = mbRight then
PopupMenu1.Popup(X+P.X+StringGrid1.Left, Y+P.Y+StringGrid1.Top);
end ;

Уроки Delphi начинающим

Вопросы и комментарии (11) Решение задач в Delphi

Андрей, добавлено 13.08.10, 18:54:03
А ведь можно написать так, и тогда вообще слагаемых не надо.

procedure TForm1.SGMouseUp(Sender: TObject; Button: TMouseButton;
var point: TPoint;
begin
getCursorpos(point);
if Button = mbRight then PopupMenu1.Popup(point.X, point.Y);
end; Автор, добавлено 13.08.10, 19:58:51
Андрей, спасибо! Да, функция GetCursorPos это выход. Максим, добавлено 6.09.10, 19:52:30
Подскажите, пожалуйста, как узнать, когда PopupMenu исчезает? Событие OnPopup есть (появление), просто мне надо, чтобы когда меню появлялось, текст на окне становился зеленым, а когда исчезало - снова черным Автор, добавлено 6.09.10, 20:45:18
Я сейчас на отдыхе, не у компа. Могу предложить такой вариант: определять, когда меню пропадает. Это точно происходит при нажатии клавиши Escape и при выборе какого-нибудь (любого) пункта меню. Введите в эти события изменение цвета. Константин, добавлено 8.05.11, 11:22:55
можете помочь с Shape
короче у меня есть шайп и кнопка в одной форме, они расположены на групбоксе
я задаю такое:
procedure TForm15.Shape1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if ColorDialog1.Execute then
begin
Shape1.brush.Color:= ColorDialog1.Color;
Shape1.pen.Color:= ColorDialog1.Color;
end;
end;
затем кнопке задаю такое:
rocedure TForm15.Button1Click(Sender: TObject);
begin
form15.Color:=Shape1.brush.Color;

end;
Вот так все работает, т.е для формы там где выше написанные компоненты есть
программа работает, а как сделать чтобы для других форм работала?
Автор, добавлено 8.05.11, 12:04:43
Константин, трудно на самом деле понять ваш вопрос. Что имеется в виду под работой программы в других формах? Может, вам нужно не только 15-й форме цвет присваивать, но и другим? То есть в других формах тоже есть кнопка, при нажатии на которую цвет формы меняется? В этом случае нужно просто сослаться на Shape той формы, где он есть:

FormN.Color:=Form15.Shape1.Brush.Color;

Или уточните ваш вопрос. Аноним, добавлено 8.05.11, 12:10:47
не совсем так
я должен в 15-ой форме нажать на кнопку и цвет должен поменяться во всех остальных формах
так можно вообще? Константин, добавлено 8.05.11, 12:17:02
Все, спасибо за помощь, я сам разобрался. Автор, добавлено 8.05.11, 12:20:40
Пожалуйста костя, добавлено 28.10.11, 17:09:00
можно обойтись в последнем случае и без ТПоинтов. Это заметно сократит код.
PopupMenu1.Popup(Mouse.CursorPos.X, Mouse.CursorPos.y) Автор, добавлено 28.10.11, 17:28:13
Спасибо! Добавлю в статью, как вариант.

Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон . Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!

Всплывающие модальные окна предназначены для привлечения внимания. Появляясь на странице, они блокируют основной контент и заставляют пользователя ознакомиться со своим содержимым (текстом, видео, призывом к действию и т.п.).

Внимание! Пусть вас не пугает длина этого урока – сложностей в создании модальных окон нет (читайте, и убедитесь сами), просто я подробно описываю каждый шаг.

Алгоритм создания в WordPress модальных окон

В WordPress нет встроенных инструментов для работы со всплывающими окнами. Мы будем конструировать и настраивать их с помощью плагина Popup Maker . Давайте, например, создадим модальное окно с видео, всплывающее при клике по кнопке (позже можно будет настроить его автоматическое появление).

1. Установите плагин Popup Maker. Активируйте его. Напоминаю: устанавливать плагины мы учились .
   
2. Найдите в боковом меню слева админпанели раздел Popup Maker и перейдите в его подраздел Add Popup .
3. Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
4. Придумайте заголовок окна (будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл .
5. В блоке Conditions выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта , выберите Формат:All .
6. Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио – любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали ).
   
7. В блоке Triggers находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open .
8. Укажите ниже размер всплывающего окна (в пикселах или процентах). При выборе варианта Auto плагин подберет размеры модального окна автоматически.
9. Отметьте чек-бокс в строке Отключить фон , чтобы за всплывающим окном была видна страница сайта (рекомендую).
10. Настройте тип и скорость анимации (не обязательно: по умолчанию уже выставлены оптимальные значения).
    
11. Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
12. Значение свойства z-index , установленное по умолчанию, обычно в изменении не нуждается.
    
13. Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close (окно закроется при клике на фон вокруг него), Press F4 to Close (окно закроется клавишей F4 ), Press ESC to Close (окно закроется клавишей ESC ). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.
    
14. Нажмите Опубликовать. Поздравляю, модальное окно создано!

О настройке дизайна всплывающего окна

Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme раздела Popup Maker бокового меню админпанели (слева).

В открывшемся редакторе настройте нужный фон окна, цвет и размеры шрифтов, отступы, тени , название кнопки закрытия. На вкус и цвет…– сами знаете, поэтому подробно останавливаться на настройке дизайна всплывающего окна не буду. Появятся вопросы – задайте их в комментариях.

Как настроить открытие всплывающего окна

Помните, мы не задействовали в настройках плагина функцию автоматического открытия модального окна? Поэтому нужно придумать, каким образом наше окно будет открываться. Давайте настроим «всплытие» окна при клике по ссылке, картинке или кнопке.

Каждому окну плагин Popup Make присваивает два уникальных CSS-класса . Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.

Где и как сделать накрутку комментариев Instagram – все методы. Портал pricesmm.com выяснил, что дешевле и лучше: накрутить комментарии в Инстаграме самостоятельно, с программами, получить в обмен или заказать услугу на сервисе СММ. Плюсы и минусы каждого способа.

Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:

Модальное окно появится при клике по картинке

Модальное окно активируется после нажатия кнопки

Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna . Должно появиться похожее модальное окно:

Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!

Предлагаем вам подборку 5 самых интересных, на наш взгляд, интернет-сервисов для создания интерактивных всплывающих окон (pop-up), которые используются в интернет-маркетинге уже более 20 лет и остаются популярными до сих пор. Причиной популярности всплывающих окон является четкая ориентированность на потребности конкретного пользователя — вы даете посетителю вашего сайта только то, что ему действительно нужно, именно в тот момент, когда это необходимо. Однако при подготовке pop-up окон важно комплексно подойти к процессу — от выбора онлайн-сервиса, до определения времени жизни всплывающего окна.

Сервис Optimonk
Optimonk предлагает глубочайшие, профессиональные настройки. Если в нём хорошо разобраться, можно получить потрясающие результаты. Он имеет несколько тарифных планов, которые стартуют от $29/месяц, но предлагает 14-дневный бесплатный тестовый период.
Устанавливается скрипт просто. Нужно зарегистрироваться на optimonk.com. Выбрать там подходящий шаблон всплывающего окна и отредактировать его по своему желанию. Для редактирования всплывающего окна предлагается простой редактор. Также это можно сделать, изменив код CSS либо javascript. Чтобы изменить фразу, ее нужно выделить мышкой и отредактировать.
Предлагаются готовые цветовые решения, но можно установить собственный тон. Также можно выбрать подходящую анимацию. Полезным будет добавить всплывающее благодарственное окно, которое автоматически будет всплывать после заполнения и отправки пользователем формы. После сохранения настроек, нужно установить расписание и выбрать необходимые триггеры, то есть события, которые будут провоцировать появление поп-апа.
В данном сервисе настраивается таргетинг и производится интеграция с популярнейшими CRM-системами и e-mail сервисами (зарубежными). После сохранения всех установок останется только полученный код скопипастить в шаблон сайта в самом конце страницы, перед тегом. Заключительный этап установки — нажатие кнопки OK, что активирует кампанию. Дальше Вы сможете управлять своим Pop-up в персональном кабинете.

Достоинства Optimonk:

• 11 подготовленных шаблонов, в том числе с таймером, формочка для e-mail и имени, скидочный купон, двойной Pop-up и т.д.
• Полная интеграция с самыми известными е-мейл сервисами и движками.
• Связь с Google аналитикой.
• Программист может настроить глубочайший таргетинг.
• Отличная аналитика.
• Изменениями javascript можно динамически менять текст.

Недостатки Optimonk:

• Всего двухнедельный тестовый период.
• Приличная стоимость.
• Ограничение в 5000 уникальных посетителей/мес.
• Принимается только один домен.

Сервис Picreel
Неплохой платный сервис с расширенными возможностями для работы профессионалов интернет-маркетинга. При оплате за 12 мес. — скидка в 25%.

После регистрации на picreel.com, нужно выбрать подходящий шаблон:

• Подписка.
• Redirect.
• Опрос.
• Скидки.
• Простой pop-up.
• Большой Pop-up.
• Pop-up из 2-х окон…

Любой шаблон можно редактировать в несложном редакторе или меняя HTML/CSS. Дизайн меняется так же легко, как и добавляются новые поля. Можно вставлять анимацию, таймер обратного временного отсчета и другие интерактивные элементы. Как обычно, настраиваются триггеры, после чего настройки сохраняются и сгенерированный код вставляется в шаблон веб-сайта в конце страницы.

Достоинства Picreel:

• 30-дневный бесплатный тест без ограничения функционала.
• Множество шаблонов.
• Полная совместимость с CRM- и e-mail сервисами (зарубежными).
• Обширный таргетинг.
• Отличная аналитика.
• Возможность α & ß тестирования.
• Адаптация дизайна под мобильные устройства.
• Партнерская программа.
• За каждого приведенного пользователя: $25.
• Сумму в 100 долларов уже можно выводить, в Paypal, к примеру.

Недостатки Picreel:

• Довольно приличная стоимость, от 19 долларов ежемесячно.
• Ограничение трафика в 3000 уников в месяц или в 30000 показов.
• Бесплатных тарифов нет.

Достоинства Witget:

• Нормальная цена.
• Русский язык.
• Огромная база шаблонов.
• Кроме Pop-up, много заготовок для баннеров, кнопок, форм, таймеров и так далее.
• Адаптационная верстка под мобильные устройства.
• Русскоязычные соцсети.
• Экспорт данных.
• Интеграция с русскоязычными сервисами e-mail рассылок.
• Нормальный статистический учет.

Недостатки Witget:

• Очень трудно связывается с Google analytics.
• Всего лишь 7-дневный бесплатный тест при довольно «кусачей» цене от 990 руб./мес.
• Правда, скидки при оплате наперед.

Преимущества Addthis:

• Наличие бесплатного тарифа.
• Простой интерфейс.
• Текстовое наполнение и дизайн поп-апа можно менять.
• Таргетинг прекрасно настраивается.
• Замечательная аналитика.
• Возможность скачать собранные электронные адреса.
• Дизайн адаптируется под мобильные.

Недостатки Addthis:

• Большинство полезных функций представлены лишь в платных вариантах.

Сервис Sumome
Стоимость полнофункциональных тарифов стартует от $40/месяц, хотя есть и бесплатный, в котором предусмотрены базовые функции. Сервис хорош тем, что кроме всплывающих окон, вы можете приобрести там множество разнообразных виджетов, которые будут весьма полезны интернет маркетологам. После регистрации на sumome.com нужно указать URL вашего ресурса. Появившийся код нужно скопировать в шаблон на своем сайте сразу после тега. Затем нужно перейти на свой ресурс и щелкнуть по изображению короны, которая должна появиться вверху экрана справа.
Далее жмёте по иконке «Sumo Store» и выберите приглянувшийся виджет, часть виджетов бесплатны и помечены меткой Free. Щелкнув по кнопке с виджетом, нужно подождать, пока он установится и настроить его вид. В полных версиях можно добавлять поля любой формы. В бесплатной версии можно использовать только 1 поле — для ввода e-mail. На бесплатном тарифе вы не сможете использовать готовые шаблоны, там он доступен лишь один, и в нём можно поменять лишь цвет фона.
Далее нужно настроить поведение поп-апа и выбрать страницы, где он будет всплывать. Затем выбрать CRM- и Email Service для синхронизации с вашим подписным листом. Собственную форму в полных версиях можно создавать в HTML-редакторе. После настроек всех параметров, остается нажать SAVE и можно начинать следить за статистикой.

Достоинства Sumome:

• Бесплатный тариф.
• Множество виджетов.
• Возможность менять текст и дизайн поп-апа.
• Собранные Email можно скачать.

Недостатки Sumome:

• На бесплатном тарифе доступен лишь 1 шаблон.
• Не всем доступная цена — $40 в месяц.
• Виджеты продаются набором, а не по отдельности.
• Таргетинг отличается скудными настройками.
• Брендирование не отключается.

Подведем итоги.

Мы рекомендуем начать использовать pop-up окна с бесплатных сервисов, посмотреть реакцию пользователей, конверсию и отклик, и только потом приобрести платную подписку. Таким образом вы сможете оценить эффективность всплывающих окон и успеете подобрать нужную стратегию продвижения. Попробуйте несколько площадок, используйте весь арсенал инструментов для создания pop-up окон, таким способом вы сможете извлечь максимум из возможностей, которые предоставляют всплывающие окна.

Надеемся, данная подборка будет вам полезна в деле создания полнофункционального сайта!