Рассмотрим код всплывающего окна, которое позволяет организовывать бесконечное количество уведомлений для ваших пользователей, которые могут содержать заголовки, футер и само уведомление с html содержимым.
Данная всплывайка является моей собственной модернизацией над существующими вариантами. Я постарался улучшить функционал по максимому.
Особенности всплывающего окна:
- Данные для всплывайки можно писать как внутри окна, так и брать из любого элемента на сайте по его идентификатору.
- Во всплывайку можно вставлять заранее подготовленный заголовок и футер или открывать без них.
- Появляется с плавным затемнением экрана.
- Может открываться сразу при загрузке сайта.
- Позволяет организовывать на сайте бесконечное множество всплываек.
- Минимум js и css кода - 25 строк
Установка:
1. Подключите css и js код, как в скачанном примере.
2. Для задания обычной всплывайки вставьте:
html:
<div class="blokno blokno3"><div class="bloknomain">Текст всплывайки!</div></div>, где blokno - обязательный класс, blokno3 - уникальный класс, на который активируем всплывайку.
js:
Для активации всплывайке по клику на любом элементе пропишите код: <div onclick='bl_show(".blokno3", null)'>Показать сообщение!</div>.
Если вы хотите, чтобы она работала сразу после загрузки страницы: <script>$(document).ready(function(){ bl_show(".blokno3", null); });</script>
3. Для задания всплывайки, которая берет html контент из любого элемента (тега) на вашем сайте, нужно задать его идентификатор.
html:
<div class="postr"><p>Текст всплывайки!</p><p><b>Доступны любые html теги!</b></p></div>
<div class="blokno blokno4"></div>
js:
Для активации всплывайки используется такой же код, как и в предыдущем примере, только с указанием идентификатора, откуда берем данные для показа (.postr): <div onclick='bl_show(".blokno4", ".postr")'>Показать сообщение!</div>.
Вот таким не хитрым способ можно сделать ваш сайт более динамичным. Если подумать, то за счет возможности отображать любой контент по его идентификатору во всплывайке, можно легко организовывать всплывающие галереи, краткий текст новости, видео, форму авторизации, какой-нибудь информер погоды и т.п.
А если вам нужно, чтобы элемент был показан только во всплывайке, а изначально был невидимым. Например, скрыть форму авторизации и добавить только одну кнопку "Авторизация", при нажатии на которую откроется наша форма уже во всплывайке. Для этого просто поставьте style="display: none" на тот идентификатор, с которого будете брать контент (например, в нашем втором примере: <div class="postr" style="display: none">...). Таким образом, можно очень неплохо урасить свой сайт.
