В следующем кратком совете я покажу вам, как открыть модальное окно на веб-странице после небольшой задержки. Это может быть полезно, чтобы выделить конкретный призыв к действию, например, подписаться на рассылку новостей или получать лайки на Facebook. Некоторые сайты также используют эту технику для показа рекламы.
Но прежде чем продолжить, уделите секунду, чтобы спросить себя, действительно ли это то, что вам нужно сделать. Всякий раз, когда сайт, который я просматриваю, открывает модал, не нажимая на что-либо, я почти всегда сразу закрываю его и раздражаюсь, что мое внимание отвлекается от того, на что я смотрю. По моему мнению, такие методы могут отвлекать внимание от общего восприятия сайта, и существуют более эффективные способы информирования посетителей о вашем контенте.
Основная реализация
Все еще читаете? Хорошо, я полагаю, вы настроены на это, так что давайте перейдем к этому. Для нетерпеливых есть рабочая демонстрация в конце статьи.
Для этого краткого совета я буду использовать плагин Colorbox для отображения модальных. Colorbox использует jQuery, поэтому вам придется добавить это и на свою страницу. Вот шаблон.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Delayed modal demo</title> <link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" /> </head> <body> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script> <script> <!-- Code here --> </script> </body> </html> Обратите внимание, что я использую различные CDN для включения скриптов, но вы также можете установить зависимости, используя менеджер пакетов, такой как npm или bower.
Отображение модального
Обычно мы назначаем Colorbox элементу HTML и передаем любые параметры в виде пар ключ / значение внутри объекта:
$(selector).colorbox({ key:value, key:value });
Тем не менее, мы хотим вызвать colorbox напрямую (без присвоения ему чего-либо), поэтому синтаксис немного отличается:
$.colorbox({ key:value, key:value });
Colorbox имеет множество опций (многие из которых связаны с отображением изображений), которые позволяют настроить модальный режим. В следующем примере я указываю его размеры, присваиваю ему имя класса (что позволяет мне стилизовать его с помощью CSS) и передаю ему строку HTML для отображения. Вы можете найти полный список опций на странице, указанной выше.
$.colorbox({ html:"<h2>Call For a Free Quote</h2>", className: "cta", width: 350, height: 150 });
Затем все, что нам нужно сделать, это использовать функцию setTimeout JavaScript для вызова этого кода по истечении требуемого периода времени. setTimeout() — это встроенная функция JavaScript, которая вызывает функцию или выполняет фрагмент кода после указанной задержки в миллисекундах. Если вы хотите setTimeout() входы и выходы функции setTimeout() , вы можете прочитать это руководство по SitePoint .
setTimeout(function(){ $.colorbox({ html:"<h2>Call For a Free Quote</h2>", className: "cta", width: 350, height: 150 }); }, 10000);
Теперь всплывающее окно откроется после того, как ваш посетитель просматривал сайт в течение десяти секунд.
Проблемы доступности
Есть ряд проблем доступности, связанных с модальными окнами, например: могут ли пользователи клавиатуры взаимодействовать с ними? Разметка семантическая? Их легко уволить? Вы можете найти более подробное обсуждение этой темы здесь: Как сделать модальную Windows лучше для всех .
Хотя Colorbox поставляется с множеством этих функций из коробки, есть еще несколько вещей, которые мы можем улучшить.
Сдвиг Фокуса
Когда модальное окно открывается, Colorbox смещает фокус на само окно. Это хорошо, но если у нас есть какие-либо интерактивные элементы в модале (например, элемент <input> ), мы могли бы вместо этого установить фокус на это. Это будет означать меньше щелчка мышью для пользователей мыши и меньше нажатий кнопок для тех, кто использует клавиатуру. Мы можем сделать это с помощью метода фокуса JavaScript.
Нам также нужно будет использовать событие onComplete , которое запускает Colorbox, чтобы убедиться, что наш контент был загружен.
$.colorbox({ ... onComplete: function(){ $("#myInput").focus(); } });
Вспоминая, где пользователь был ранее
После того, как пользователь закрыл всплывающее окно, будет вежливым возвращать его туда, где он ранее находился на странице. Чтобы сделать это, нам нужно отследить самый последний элемент, с которым взаимодействовал пользователь, и сбросить фокус на этот элемент после закрытия модального окна.
var lastFocus; setTimeout(function(){ lastFocus = document.activeElement; $.colorbox({ ... onClosed: function(){ lastFocus.focus(); } }); }, 2000);
Отображение всплывающего окна один раз каждые X часов
В целях удобства использования не рекомендуется открывать модальное меню каждый раз, когда пользователь посещает ваш сайт. Вместо этого рассмотрите возможность показывать его один раз каждые X часов или один раз каждые X дней.
Один из способов сделать это — установить файл cookie после показа модального режима, срок действия которого истекает через отведенное время. Затем вы можете проверить наличие куки при загрузке страницы и действовать соответственно.
Для этого нам понадобится набор функций для обработки куки. Я рекомендую js-cookie для этой задачи.
Включите его на своей странице после библиотеки Colobox:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
К этому моменту также имеет смысл начать перемещать различные части функциональности в свои собственные функции.
var lastFocus; function onPopupOpen(){ $("#myInput").focus(); } function onPopupClose(){ Cookies.set('colorboxShown', 'yes', { expires: 1 }); lastFocus.focus(); } function displayPopup(){ $.colorbox({ html:"<h2>Call For a Free Quote</h2>", className: "cta", width: 350, height: 250, onComplete: onPopupOpen, onClosed: onPopupClose }); } setTimeout(function(){ var popupShown = Cookies.get('colorboxShown'); if(popupShown){ console.log("Cookie found. No action necessary"); } else { lastFocus = document.activeElement; displayPopup(); } }, 2000);
демонстрация
И вот все это работает на CodePen. Запустите вставку, и через три секунды откроется всплывающее окно. Он будет показываться только один раз каждые 24 часа, так как он устанавливает cookie, как показано выше. Сказав это, я добавил кнопку « Очистить куки» , чтобы вы могли запускать демонстрацию несколько раз. Вы можете перезапустить вставку, нажав на кнопку Rerun в правом нижнем углу.
Вывод
В этом кратком совете я продемонстрировал, как открыть всплывающее окно, когда пользователь просматривает ваш сайт в течение определенного времени. Я также подчеркнул проблемы юзабилити и доступности, связанные с этим подходом.
Если у вас есть какие-либо замечания или вопросы, я хотел бы услышать их в комментариях ниже. Если у вас есть какие-либо вопросы, касающиеся кода, или вы застряли при реализации этого на своем собственном сайте, я бы рекомендовал вам опубликовать вопрос в категории JavaScript на форумах SitePoint.