Как сделать несколько всплывающих окон на сайте.

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

В большинстве случаев проблема заключается в том, что вы добавляете на сайт одну всплывающую форму и она работает хорошо. Но как только вы добавляете ещё одну или несколько форм, то все они либо вообще перестают работать, либо во всех всплывающих окнах выводится один и тот же контент.

Знакомая ситуация?

В чём может быть проблема?

Дело в том, что в большинстве случаев для вывода всплывающей формы используются идентификаторы (ID). Они могут быть применены к форме или к ссылке, при нажатии на которую эта форма будет появляться, либо сама ссылка может ссылаться на блок с идентификатором (так называемый якорь). И этот идентификатор должен обязательно быть уникальным.

Давайте разберём один пример. Вот код, который позволяем вывести всплывающую форму на сайте wordpress. Если кому-то интересно узнать подробнее как делаются всплывающие формы на сайте worpress – жмите на эту ссылку.

Как сделать несколько всплывающих окон на сайте.

Как сделать несколько всплывающих окон на сайте.

Здесь есть идентификатор для всплывающей формы, и он же используется как якорь для ссылки.

Получается что для одной конкретной всплывающей формы идентификатор этой формы и якорь для ссылки имеют одинаковое название.

Если мы решим сделать ещё одно или несколько всплывающих окон, то для них у нас должны быть другие идентификаторы.

Вот пример.

 несколько всплывающих окон на сайте

Решение проблемы вывода нескольких всплывающих форм.

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

Надеюсь, что я помогла вам разобраться с этой проблемой. Если данная статья оказалась для вас полезной, то делитесь ей со своими друзьями.

Если остались вопросы – пишите их в комментариях.

Пока на этом всё :) Подписывайтесь на обновления блога и получайте новые статьи себе на почту.

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

25 комментариев

  1. Юлия, спасибо, всё понятно. А как подшить всплывающую форму под кнопку с редактора ворд пресс, там в строке нужно указать URL- назначения. Есть какой-то вариант?

    • Я не совсем поняла что Вы имеете ввиду. Можете описать что именно Вы хотите получить в итоге?

  2. И ещё вопросик когда стал увеличивать кол-во все полнтело, в сайдбаре работает, а на страницах вставляю в иджет текст не работает, кнопка есть нажимаешь, в адресной строке вверху добавляется хвост /#contact_form_pop_up и ничего не происходит. Помогите пожалуйста.//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif

     

    • Нужна ссылка на сайт с не работающей формой. Так трудно что либо посоветовать.

  3. Мне нравятся кнопки самого редактора вордпресса и я под них хочу сделать всплывающие формы.

    • Всё равно не понимаю. Вы хотите панель инструментов для редактирования добавить в форму отправки?

  4. всплывающую форму обр. связи все как Вы показывали, тольео не под новую кнопку, котррую можно вставить куда угодно, а под кнопки, которые я делаю на страницах через обычный редактор SiteOrigin Кнопка, а там только URL-назначения можно поставить. А я хочу под эту кнопку вспл.ф.обр.св. 

     

    • Теперь понятно :) А класс для кнопки там никак нельзя прописать? Просто для нормальной работы нужно приписать класс и ссылку.

    • Вышлите пожалуйста ссылку на страницу, на которой всплывающая форма работает.

  5. точно такой же код (Ваш) вставляю как и в сайтбар, только в текст.виджет на странице , не работает, хотя вчера работал и две формы поддерживал, потом что-то случилось и сейчас только так. Но хочу именно под кнопку SiteOrigin Кнопка форму сделать. А в связи с тем, что на страницах вообще перестал работать, вообще в панике//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif

    • А WordPress случайно не обновлялся? Или может плагины какие то ставились или обновлялись?

    • Я бы ещё попробовала вставить этот же код просто на страницу без использования page builder (или другого конструктора страниц) То есть просто в редакторе WordPress на вкладку «Текст»
      С точки зрения кода у Вас вроде всё правильно написано. Видимо где то что то конфликтует. Нужно попробовать разные варианты чтобы понять что именно.
      Попробуйте создать новую страницу и на ней попробовать добавить этот код.

  6. на странице работает http://fenix-mobile.ru/proba/

     

  7. да возможно из-за конструктора у меня стоял еще Beaver Builder Plugin я его как раз в тот момент хотел удалить.

    Попробую удалить его сначала а потом попробовать еще раз.

  8. Юлия, у меня стоят плагины:

    SiteOrigin Бандл Виджетов и Page Builder от SiteOrigin

    они не могут конфликтовать не знаете?

    • Конфликтовать может многое: начиная от двух несовместимых плагинов и заканчивая темой и каким то плагином либо же плагином и версией движка.

    • Вы не представляете как я за Вас рада! Вы сами во всём разобрались :)

    • Здравствуйте! Очень интересно как Андрею удалось решить эту задачу! Тоже хочу что бы на одной странице выводились разные всплывающие формы используя виджет SiteOrigin Кнопка.

  9. Я бы тоже хотел понять как сделать форму с использование виджета SiteOrigin кнопка.

    • Здравствуйте, Алексей! Для того чтобы можно было к ссылке или кнопке привязать всплывающую форму для этой кнопки должна быть возможность задавать свой класс. Для виджета «Кнопкка SiteOrigin», насколько я помню, такой возможности нет. Так что нужно или писать скрипт для того чтобы принудительно задать ей необходимый класс или искать другой способ.

  10. Юлия, подскажите как сделать и настроить модальное окно с формой(email или телефон + кнопка) которое будет открываться только при уходе и закрытии страницы. Заранее спасибо.

    • Здравствуйте, Геннадий! В ближайшее время сделаю статью по этой теме.

  11. Добрый день.

    А как сделать несколько идентификатоов? в каких настройках?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif