Как сделать всплывающее окно для сайта Три способа


Содержание материала:

Два способа открыть pop-up окно в Divi без использования плагинов

Это пример всплывающего окна!

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

Всплывающие (pop-up) окна, в определенных случаях, бывают весьма полезны на сайте. В них можно разместить информацию, которую пользователь может просмотреть не покидая основной веб-страницы. Например, в такое окно удобно поместить политику конфиденциальности сайта или какой-либо дисклеймер не создавая под них отдельные станицы. В Divi, к сожалению, нет модуля позволяющего реализовать данный функционал. Поэтому веб-дизайнерам обычно приходится пользоваться плагинами сторонних разработчиков. Не всегда они бесплатные и уж точно не уменьшают нагрузку на сайт. Сегодня мы поговорим о способе создания всплывающих окон без использования каких-либо плагинов, опираясь только на ресурсы самой темы Divi. Дело в том, что модуль Image для показа изображений в лайтбоксе использует уже предустановленную библиотеку Magnific popup (кстати, разработанную киевлянином Дмитрием Семеновым). Ею мы и воспользуемся.

1.Открытие popup окна по клику на ссылку в посте или статье

Сначала сделаем окно, открывающееся по клику на обычной текстовой ссылке. Для этого в Divi builder создадим раздел с тремя модулями:

  • модуль Code – будет содержать скрипт создания pop up окна;
  • модуль Text – здесь расположим текстовую ссылку для раскрытия окна;
  • модуль Text – здесь будет содержаться контент отображаемый в окне.

Это будет выглядеть так:

В модуль Code вставляем следующие строки:

Этот код отслеживает клики на ссылки с классом divipopup и открывает объект указанный в идентификаторе data-content-id. Внутрь первого текстового модуля помещаем следующую ссылку:

В нашем случае идентификатор определен как «hello” и при нажатии на ссылку будет вызван элемент с таким ID. В качестве ссылки вполне можно использовать и изображение. Для этого внутри тега нужно указать источник этого изображения. Например:

Следующим шагом создаем собственно всплывающее окно.Для этого используем последний модуль Text. Открываем настройки модуля. Добавляем и форматируем контент который должен быть отображен в нашем всплывающем окне. Здесь же можно выбрать цвет фона. На вкладке Design можно поиграться тенями, выбрать анимацию при появлении окна и задать отступы (Custom Padding) от края окна до текста. Затем переходим на вкладку Advansed. Здесь в поле CSS ID вставляем наш идентификатор hello, а в поле CSS Class mfp-hide. Определение этого класса важно, так как именно “mfp-hide” не дает отображать контент на странице до вызова pop-up окна. Сохраняем параметры модуля. Теперь клик по ссылке будет открывать всплывающее окошко с нашим содержимым. По умолчанию, оно разворачивается на всю ширину экрана. Имеет смысл сделать его меньшей ширины. Кроме того, кнопку закрытия окна (в виде крестика) можно сделать чуть больше и контрастнее. Для этого перейдем в настройки темы Divi->Theme Options-> General и в самом низу в поле Custom CSS добавим несколько строк:

Как вариант, эти строки можно вставить в файл style.css дочерней темы.

Вот теперь все выглядит неплохо.

2.Открытие pop-up окна через кнопку

Открыть pop-up окно так же можно и по клику на стандартную кнопку Divi. Для этого варианта нужно несколько изменить код его вызова. В модуль Code вставляем (или добавляем, если хотим оставить возможность открытия окна через текстовую ссылку) следующие строки:

Вместо текстового модуля для ссылки открытия окна используем модуль Button. В нем прописываем следующие параметры: Button URL: #hello; CSS Class: divipopup-2 Теперь окно будет открываться при нажатии на кнопку.

В том случае, если окно должно открываться не только в отдельной статье или посте, а вообще из любого места сайта (например, по ссылке «Политика конфиденциальности» расположенной в футере), код нужно вставлять уже не в модуль Code, а в хидер страницы. Для этого перейдем Divi->Theme Options->Integration и добавляем код в поле Add code to the of your blog.

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

Узнайте, как создавать всплывающие окна с CSS и JavaScript.

Создание всплывающих окон

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

/* Popup container */
.popup <
position: relative;
display: inline-block;
cursor: pointer;
>

/* The actual popup (appears on top) */
.popup .popuptext <
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
>

/* Popup arrow */
.popup .popuptext::after <
content: «»;
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
>

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show <
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
>

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn <
from
to
>

Dobrovoi Master

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

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

Меня больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и совсем небольшого javascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.

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

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент

Модальное Окно!

Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.

Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.

Топ-пост этого месяца:  настройка плагина all in one seo pack для оптимизации wordpress

Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1

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

Как сделать всплывающее (pop-up) окно?

Как сделать всплывающее (pop-up) окно – вопрос, который будоражит ум любого молодого начинающего программиста. И сегодня мы рассмотрим, как сделать данное всплывающее окно. Сразу немного забегу вперед, ибо то, что мы сделаем, будет поистине очень и очень интересным и функциональным.

Итак, делать мы будем похожее окно, которое я реализовал на сайте одного из моих заказчиков. Посмотреть можно здесь. Огромное преимущество данного метода создания такого окна заключается в том, что мы не будем использовать JavaScript, а ограничимся исключительно моим любимым CSS3 и HTML5. Этим самым мы убьем сразу несколько зайцев. Во-первых, облегчим загрузку нашего сайта, во-вторых, реализуем все в удобном и легком виде с минимальным использованием кода, что позволит Вам самостоятельно придать Вашему всплывающему окну любые размеры, цвета, формы. Я думаю – это здорово. Итак, приступим.

Представьте, у Вас уже есть сайт и Вы хотите, где-то внедрить кнопку, например, “регистрация” или “онлайн заявка”. И Вы хотите, чтобы пользователь, нажав на эту кнопку, увидел окошко небольшого размера, которое позволяет ввести в него какие-то данные, а затем отправить их администратору сайта. Вот такое вот окно мы с Вами и будем сейчас делать.

Для начала мы создадим эту кнопку, я думаю, Вы и без особого труда это сделаете. Но в тег Вы должны вписать следующее #openModal. Вот так это должно примерно выглядеть и у Вас. Далее, перед закрывающим тегом

Всплывающее окно при входе на сайт на CSS3

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

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

Шаг 1. HTML

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

Также мы добавили несколько кнопок, которые будут оживать при наведении курсора мыши, это позволит добавить большего реализма и оживить наше окно.

Шаг 2. CSS

Нам необходимо определить параметры контейнера, кроме этого мы стилизуем наш контейнер заливкой цвета, и добавлением кнопок. Мы добавили для фона размытие, ведь нам необходимо отвлечь внимание и приковать его к окну:

Шаг 3. JS

Последним шагом будет включение и отключение размытия, эту функцию мы реализуем с помощью простой функции js:

Вот и все. Готово!

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме CSS3

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

Минимальный и настраиваемый фрагмент, позволяющий быстро генерировать семантическую форму в ваших веб-проектах.

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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.

Раскрутка в соцсетях

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

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Всплывающие окна на сайте: как заинтересовать ваших пользователей

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

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

И вот теперь вынуждены признать – мы были не правы. Не совсем правы, если быть точными. Инструмент эффективный и имеет место быть, но нужно уметь его правильно использовать. =)

Для начала разберемся в основных моментах. Существует две технологии всплывающих окон:

Попап (Pop-Up) – когда при переходе на сайт баннер покрывает экран пользователя, и продолжить работу с сайтом можно только после его закрытия.

Попандер (Pop-Under) – когда при переходе на сайт появляется баннер, но не мешает посетителю взаимодействовать с сайтом.

Многие путают и называют все всплывающие окна попапами, но теперь-то вы знаете, что к чему, и не ошибетесь.

Для чего можно использовать:

  • проинформировать пользователя об акциях и спецпредложениях;
  • показать новый продукт или услугу;
  • предложить подписаться на рассылку;
  • выделить полезную функцию (если у вас сервис);
  • напомнить о товарах в корзине и т.д.

Основные элементы, которые должно содержать всплывающее окно:

  • заголовок;
  • текст – если предложение помещается в заголовок, то можно им и ограничиться;
  • призыв к действию – разместите его отдельно, либо отразите на кнопке;
  • изображение – по желанию можно ограничиться цветным фоном;
  • форма или кнопка со ссылкой на раздел/страницу – и не забудьте про условия обработки персональных данных;
  • кнопка закрытия формы – крестика в правом верхнем углу будет достаточно.

Пример всплывающего окна:

Рекомендации по контенту

Скептики скажут, что большинство пользователей закрывает модальные окна машинально, не читая их, но на самом деле нет. Просто предложение должно быть:

1. Полезным. Скидка 5% или 100 рублей на баланс вряд ли кого-то привлекут, поэтому предлагайте интересные бонусы.

От такого предложения будет трудно отказаться:

2. Уместным. Не нужно в книжном разделе предлагать купить купальники или автозапчасти. Также сомнительно выводить всплывающее окно на Главной, когда пользователь только зашел на сайт. Дайте ему время изучить основную информацию, перейти на интересующую страницу.

Хорошие варианты

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

Регистрация на сайте уместна, но пользователь только зашел на сайт и так агрессивно нападать на него не стоит:

Наша форма подписки, которая появляется внизу статьи:

3. Понятным. Кратко и прозрачно изложите суть предложения. Длинные сообщения и невнятные условия отталкивают. Обязательно укажите выгоду для клиента.

  • «Дарим 1 000 рублей за подписку на наши новости» + форма подписки.
  • «Скидка 20% на первый заказ» + форма регистрации.
  • «Посмотрите похожие товары со скидкой» + ссылка на соответствующий раздел.

Предложение слишком общее:

Пример лаконичного текста:

4. Визуально привлекательным. Анимацию лучше исключить, а на выбранные цвета должно быть приятно смотреть. От видео и музыки с автопроигрыванием тоже стоит отказаться, чтобы не пугать пользователя. Если используете изображения, то обязательно высокого качества. Также текст должен хорошо контрастировать с фоном.

Надпись внизу не сразу заметна:

Симпатично и по делу:

5. С возможностью отказаться. Кнопка «Закрыть» должна быть заметна и удобна для клика.

Кнопка закрытия не сразу заметна:

Заметная небольшая кнопка:

6. Ненавязчивым. Показывайте предложение каждому пользователю один раз. Можно повторять показ не чаще раза в неделю.

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

Слишком большой и яркий баннер, да еще второе окно ниже:

Тоже яркий, но ненавязчивый пример всплывающего окна на сайте:

Технические особенности

Добавить всплывающие окна на сайт можно:

  • С помощью HTML и JavaScript.
  • Применяя плагины для вашей CMS. Например, если у вас сайт на WordPress, то для него есть готовые плагины ITRO Popup Plugin, Optinmonster, YITH Newsletter Popup и др.
  • Используя готовые сервисы: Witget, PopMechanic, CartProtector и др.

Основные варианты настройки:

  • Показ окна после определенного времени. Оптимальное время – 30-90 секунд, когда пользователь уже изучил основную информацию на странице.
  • Сообщение для новых пользователей. Как и для предыдущего способа, лучше выждать немного времени, чтобы не отталкивать посетителя. Рекомендуем предлагать крупный бонус за регистрацию или первый заказ. Такой вариант особенно подойдет для Главной страницы.
  • Вывод окна после прокрутки до определенного места страницы. Хороший вариант для статьи, когда пользователь прочитал ее полностью, или для страницы каталога, когда пользователь дошел до конца списков товаров и ничего не выбрал. Можно показывать сообщение чуть раньше, после прокрутки 50-70% страницы.
  • Показ перед закрытием сайта. Когда курсор направляется в сторону закрытия вкладки, можно тоже показать всплывающее окно.
  • Сообщение для вернувшихся пользователей. Посетитель уже явно заинтересован в вашем продукте, поэтому почему бы не рассказать ему о дополнительных возможностях.

Еще совет: не пытайтесь обойти системы блокировки. Если клиент использует Adblock или другие блокировщики рекламы, то это его право.

Аналитика

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

Еще рекомендуем тестировать различные варианты, чтобы понять интересы вашей аудитории, например, можно предлагать разные бонусы за подписку. Рекомендуем инструмент от Google Analytics – «Эксперименты», но для настройки понадобится привлечь программистов.

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

Отношение поисковых систем

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

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

Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от Coalition for Better Ads, на которые ориентируется Google Chrome при блокировке рекламы.

В целом поисковые системы не против всплывающих окон, если они полезны для пользователя.

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

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

Делаем на CSS модальное окно за 3 шага

Здравствуйте, дорогие друзья и коллеги!

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

Благодаря великому и могучему CSS3 мы можем создать на чистом css модальное окно, не прибегая к дополнительным скриптам, модулям и плагинам.

Навигация по статье:

Выглядеть такое модальное окно будет вот так:

Посмотреть пример работы и скачать исходники можно по ссылкам ниже.

Прелесть этого способа заключается в том что он подойдёт абсолютно для любого сайта, не зависимо от того работает ли он на какой то CMS или вообще без неё.

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

Шаг 1. Создаём разметку для модального окна

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

Желательно вставить его в начале или в конце страницы.

Два способа открыть pop-up окно в Divi без использования плагинов

Это пример всплывающего окна!

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

Всплывающие (pop-up) окна, в определенных случаях, бывают весьма полезны на сайте. В них можно разместить информацию, которую пользователь может просмотреть не покидая основной веб-страницы. Например, в такое окно удобно поместить политику конфиденциальности сайта или какой-либо дисклеймер не создавая под них отдельные станицы. В Divi, к сожалению, нет модуля позволяющего реализовать данный функционал. Поэтому веб-дизайнерам обычно приходится пользоваться плагинами сторонних разработчиков. Не всегда они бесплатные и уж точно не уменьшают нагрузку на сайт. Сегодня мы поговорим о способе создания всплывающих окон без использования каких-либо плагинов, опираясь только на ресурсы самой темы Divi. Дело в том, что модуль Image для показа изображений в лайтбоксе использует уже предустановленную библиотеку Magnific popup (кстати, разработанную киевлянином Дмитрием Семеновым). Ею мы и воспользуемся.

1.Открытие popup окна по клику на ссылку в посте или статье

Сначала сделаем окно, открывающееся по клику на обычной текстовой ссылке. Для этого в Divi builder создадим раздел с тремя модулями:

  • модуль Code – будет содержать скрипт создания pop up окна;
  • модуль Text – здесь расположим текстовую ссылку для раскрытия окна;
  • модуль Text – здесь будет содержаться контент отображаемый в окне.

Это будет выглядеть так:

В модуль Code вставляем следующие строки:

Этот код отслеживает клики на ссылки с классом divipopup и открывает объект указанный в идентификаторе data-content-id. Внутрь первого текстового модуля помещаем следующую ссылку:

В нашем случае идентификатор определен как «hello” и при нажатии на ссылку будет вызван элемент с таким ID. В качестве ссылки вполне можно использовать и изображение. Для этого внутри тега нужно указать источник этого изображения. Например:

Следующим шагом создаем собственно всплывающее окно.Для этого используем последний модуль Text. Открываем настройки модуля. Добавляем и форматируем контент который должен быть отображен в нашем всплывающем окне. Здесь же можно выбрать цвет фона. На вкладке Design можно поиграться тенями, выбрать анимацию при появлении окна и задать отступы (Custom Padding) от края окна до текста. Затем переходим на вкладку Advansed. Здесь в поле CSS ID вставляем наш идентификатор hello, а в поле CSS Class mfp-hide. Определение этого класса важно, так как именно “mfp-hide” не дает отображать контент на странице до вызова pop-up окна. Сохраняем параметры модуля. Теперь клик по ссылке будет открывать всплывающее окошко с нашим содержимым. По умолчанию, оно разворачивается на всю ширину экрана. Имеет смысл сделать его меньшей ширины. Кроме того, кнопку закрытия окна (в виде крестика) можно сделать чуть больше и контрастнее. Для этого перейдем в настройки темы Divi->Theme Options-> General и в самом низу в поле Custom CSS добавим несколько строк:

Как вариант, эти строки можно вставить в файл style.css дочерней темы.

Вот теперь все выглядит неплохо.

2.Открытие pop-up окна через кнопку

Открыть pop-up окно так же можно и по клику на стандартную кнопку Divi. Для этого варианта нужно несколько изменить код его вызова. В модуль Code вставляем (или добавляем, если хотим оставить возможность открытия окна через текстовую ссылку) следующие строки:

Вместо текстового модуля для ссылки открытия окна используем модуль Button. В нем прописываем следующие параметры: Button URL: #hello; CSS Class: divipopup-2 Теперь окно будет открываться при нажатии на кнопку.

В том случае, если окно должно открываться не только в отдельной статье или посте, а вообще из любого места сайта (например, по ссылке «Политика конфиденциальности» расположенной в футере), код нужно вставлять уже не в модуль Code, а в хидер страницы. Для этого перейдем Divi->Theme Options->Integration и добавляем код в поле Add code to the of your blog.

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

Наверняка вы часто видели на сайтах всплывающие окна. Они используются с различными целями, кто-то с помощью таких окон приглашает пользователей зарегистрироваться, кто-то показывает рекламу. Применений всплывающим окнам на сайте можно найти множество.

Для того чтобы научиться делать такие окна, мы будем использовать написанный мной плагин для создания всплывающих окон — PopupWindow. Он очень прост, имеет самые необходимые настройки и весит в сжатом виде всего 500 байт! Также, прежде чем попробовать плагин в деле, вы можете посмотреть демо версию.

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

Для начала сделаем блок с текстом, а затем через 1 секунду покажем его во всплывающем окне. Итак, приступаем!

Создаём блок, который будем показывать

Блок с классом popup-window будет обёрткой для всплывающего окна, а элемент с классом popup-window-close будет элементом для закрытия окна.

Включаем плагин для отображения всплывающего окна

Здесь мы применили плагин к элементу .popup-window и указали элемент для закрытия окна .popup-window-close . Всё! Если вы всё сделали правильно, то у вас через 1 секунду появится всплывающее окно в нижнем левом углу.

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

Настройки плагина PopupWindow

Параметр Значение по-умолчанию Описание
closeSelector [нет] Селектор элемента, при клике на который закроется всплывающее окно. Обязательный параметр.
timeout 1000 Задержка всплывающего окна (в миллисекундах).
position Можно выбрать позицию где будет появляться окно (по-умолчанию слева внизу). «v» отвечает за вертикаль, «h» — за высоту.
margin 10 Отступ в пикселях от краёв окна браузера.
animation true Показывать или не показывать анимацию при появлении всплывающего окна.

Здравствуй дорогой читатель! Я рад приветствовать тебя на страницах моего блога. Уже несколько лет я занимаюсь веб-программированием и рад поделиться с тобой своими знаниями и советами. Если тебе понравились мои статьи, ты можешь подписаться на рассылку блога, из неё ты узнаешь много интересного!

У тебя доброе лицо)

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

Здравствуйте! В демо-примере оно закрывается при клике на ссылку «Закрыть окно», обратите внимание на стили на вашем сайте, возможно что-то перебивает.

Добрый день! Как настроить, чтобы всплывающее окно было поверх других окон (в моём случаи, поверх слайдера) з индекс не помогает. Сайт http://for24.ru/ , заранее спасибо!

Здравствуйте!
Не подскажите, как скрывать его? Чтобы закрыл посетитель и при переходе не другую страницу не появлялось? Как куку прикрутить? Спасибо!

По клику по экрану закрывает даже, а не по ссылке/кнопке. Чтобы писали в куку добавить
setcookie(«promo»,»yes»,1) где 1 — это один день (24 часа)

Всплывающее модальное окно при загрузке сайта с задержкой

Доброго времени суток. ��

Сейчас все чаще и чаще можно встретить на просторах интернета сайты, при попадании на которые, через несколько секунд появляется всплывающее окно, в котором Вам предлагают авторизоваться, что-то купить или вступить в группы в соц сетях.

С одной стороны, такие окна иногда напрягают посетителей, но с другой стороны иначе. Они не плохо выполняют свою работу. Если Вы таким способом привлекаете людей в группу, то приток подписчиков явно увеличиться. Может при первом заходе человек и закроет окно, отклонив предложение, но если Ваш сайт и информация на нем интересна ему, то с большой вероятностью он все таки вступит в группу, если Вы активно ее ведете, чтобы следить за новостями.

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

Способ очень простой и использует маленький javascript код, который выводит блок с задержкой. Что же, приступим.

1. Javascript.

Первым делом нам надо установить скрипт, который и совершает вывод. Для этого нужно вставить его или в подвал или в шапку Вашего сайта. Сам скрипт выглядит так.

Скрипт просто придает свойство display:block; окну, которому мы в стилях пропишем свойство display:none;. Во второй строке видно значение 5000. Это значение в миллисекундах и равно 5 секундам. Это время через которое появится окно, так что меняйте его на число побольше или поменьше, по надобности. С скриптом понятно, дальше само окно.

1. Html разметка.

Окно будет появляться по центру экрана, а весь остальной контент будет затемнятся. Для этого мы создадим основной блок с id bg_popup, который займет всю ширину и высоту экрана и затемнит основное содержимое. К тому же он будет именно тем блоком с которым работает скрипт. Внутри этого блока разместим блок с id popup, который как раз и будет окном.

Далее внутрь можно добавить все что нужно. Чтобы иметь возможность закрыть окно, так же советую добавить обязательную кнопку, в которой прописан параметр onclick, что возвращает нашему окну свойство display:none; и оно исчезает.

1. CSS стили.

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

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

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

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