Popup — это эффективный способ привлечения внимания посетителей сайта. Главное при подключении всплывающего окна — думать об интересах пользователей. Если pop-up будет появляться из ниоткуда, то вероятнее всего вызовет раздражение у посетителя, так как прервет его деятельность на сайте.
Важно, чтобы всплывающее окно было к месту и являлось функциональным дополнением, которое в нужный момент поможет пользователю выполнить необходимое действие.
Примерно так выглядит стандартная html разметка для модального окна, остальное дело вкуса и css3
<main id='main' class='main_area'>
<div class='center'>
<label class="button" for="dialog_state">
<i class="icon ion-ios-upload-outline"></i> Open the dialog</label>
</div>
<div id='console'></div>
</main>
Создание popup начинается с определения элемента, на который будем щелкать для вызова окна. Чаще всего, это - кнопка.
Затем создаем блок, в котором размещаем контент нашего popup. Кстати, не забудьте про кнопку закрытия модального окна =)
Теперь осталось только с помощью javascript сказать нашему модальному окну, когда появляться и при каких условиях исчезать. Вуаля, мы написали попап.
Пример простого модального окна есть на моем Codepen.
Сейчас popup крайне популярны, так как они помогают скрывать и показывать формы или спецпредложения. Модальные окна помогают организовать весь контент на одной странице без использования сложных технологий.
Это очень элегантный способ коммуникации с пользователем без лишней нагрузки на сайт. Однако, если неправильно настроить модальное окно, или позволять ему появляться без явного сигнала со стороны пользователя, то сайт начнет раздражать и приведет к досрочному уходу со страницы.
