Раньше я использовал простой скрипт всплывающего окна, которое открывалось по нажатию на определенный селектор. Проблема такой всплывайки была в том, что для того, чтобы добавить вторую всплывайку, приходилось менять селекторы на новые.
Решением данной проблемы является создание кода с функцией, в результате которой можно создавать бесконечно много всплываек. При этом они не будут конфликтовать друг с другом в плане селекторов. Мы будем изменять только те данные, которые должны отображаться в окне.
Кстати, особенностью данного срипта является то, что во всплывайку можно добавлять любой html контент (div, p, a и т.п.). По внешнему виду данное окно напоминает усовершенствованный alert, с отличием в том, что вид самого окна и его содержимого мы можем менять как нам вздумается.
Еще одним преимуществом данного срипта является автопозиционирование окошка по центру экрана. Скрипт может сам определять высоту и ширину экрана и в зависимости от этих параметров выравнивать окно точно по центру.
Код всплывающего окна занимает всего пару строк и не будет нагружать ваш сервер. Чтобы скрипт работал, установите как в примере библиотеку jQuery, сам код и css стили. Для запуска всплывайки достаточно прописать:
<span onclick="alertmsg('<div>Данное сообщение можно заключать в html</div>');">Сообщение при клике</span>
Запуск скрипта будет идти по действию onclick , которое можно назначить на любой тег, например, button или div. Если вам нужно, чтобы всплывающее окно сразу запускалось при открытии страницы, пропишите следующее:
<script>$(document).ready(function() {alertmsg('<div>Сообщение во всплывайке</div>');});</script>
Таким простым сриптом можно легко сделать неограниченное количество всплывающих окон с автопозиционированием по центру экрана.
