Модальное окно во весь экран на JS
 | |
| В статье представлен материал для создания анимированного модального окна на всю ширину при помощи JS, но без использования различных плагинов. Где перекреплена анимация, которая идет на появление и скрытия самого окна, что происходит с оригинальным эффектом, где нужно задействовать CSS библиотеку animate.css. Если не подключать, то получим простое закрытие и аналогичное появление. Как можно понять из названия, что окно рассчитано на весь экран монитора, но это скажем так включая его фон, что по умолчанию идет в синем оттенке. Но само окно идет в светлой палитре, а вот кнопка закрытие идет как раз на фоне, в верхнем правом углу. Сделано для того, чтоб предоставить информацию, где бы не отвлекало, а по сути получаем стабильную страницу на сайте, что по клику открываем и убираем. Наш модальный будет универсальным, что означает, что вы можете использовать его для любых целей. Просто иногда нужно создать отдельную страницу, а здесь окно отлично заменит, где вывод можно сделать под красивое оформление кнопки. Так реально выглядит после установки:  Установочный процесс: Стили под эффект появление и закрытие окна: Код <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> HTML Код <a id="vakusadun_modul" href="#open">Открыть окно</a> <div id="shopwindow" class="shopwindow bounceIn"> <div id="modalnoye_okno">+</div> <div class="modalnoye"> <div align="center"><span style="color:purple"><span style="font-size:25pt">ZorNet.Ru — сайт для вебмастера</span></span></div> </div> </div> CSS Код .shopwindow { display: none; background: #1e5b90; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99999; } .baekrana_kosmo { display: block; } .mashtab-kuyetsya { overflow: hidden; margin-right: 17px; } #modalnoye_okno { color: #c3ddf3; font-size: 40px; font-weight: bold; font-family: Times, sans-serif; border-radius: 50%; border: 4px solid #BFE2FF; width: 48px; height: 48px; line-height: 48px; text-align: center; margin: 15px; cursor: pointer; position: absolute; right: 0; transform: rotate(45deg); transition: all 0.6s; box-sizing: content-box; } #modalnoye_okno:hover { color: #f5f7f9; transform: rotate(135deg); } .modalnoye { box-shadow: 0 4px 12px rgba(27, 26, 26, 0.2), 0 16px 20px rgba(14, 14, 14, 0.2); background: #FFF; padding: 30px; margin: 100px auto; max-width: 750px; } JS Код let open_modal = document.getElementById('vakusadun_modul'); let close_modal = document.getElementById('modalnoye_okno'); let modal = document.getElementById('shopwindow'); let body = document.getElementsByTagName('body')[0]; open_modal.onclick = function() { modal.classList.add('baekrana_kosmo'); modal.classList.remove('bounceOutDown'); body.classList.add('mashtab-kuyetsya'); }; close_modal.onclick = function() { modal.classList.add('bounceOutDown'); window.setTimeout(function() { modal.classList.remove('baekrana_kosmo'); body.classList.remove('mashtab-kuyetsya'); }, 500); }; Если рассматривать, где можно задействовать модальные всплывающие окна, но в сети интернет на порталах оно используется довольно часто. Некоторые из них часто используются для подачи полной функций для регистрации или подписки на новостную рассылку. Где также можно задействовать на отображение уведомлений и предупреждений, а также для обработки форм регистрации и входа в систему. Демонстрация PS - здесь нужно изначально знать, это если на сайте установлено фиксированное меню, то в таком случай прокрутку со страницы лучше не убирать или лучше задействовать для использования прокрутки дополнительные стили. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |