Всплывающее окно на CSS и JavaScript
 | |
| Это простой пример модального окна, который отлично подойдет для сайта и безусловно для информации, что вызывается по клику с помощью JavaScript. Здесь нам не нужно подключать библиотеки, что можно сказать исполнено на стилистике, но и безусловно не обошлось баз функций, за которые отвечает JavaScript. Если рассматривать основной дизайн, то по умолчанию окно светлое, но также его легко можно перевести в совершенно другой оттенок цвета. Работа модального окна заключается в том, что можно на любой страницы сайта поместить большой кусок информации или скрипта, который может выполнять генерацию, но точнее, это форма входа или обратная связь, все то, что рекомендуется выставлять на стандартном шаблоне. Вам остается выставить кнопку вызова, и сделать ее как можно ярче, как здесь представлена, чтоб при открытие страницы сайта, вы изначально видели этот скрытый функционал. Все проверено, где ниже идет Demo на страницу:  Установка: HTML Код <button class="modalnoya">Клик для появление окна</button> <div class="dialogovo_okno"> <div class="modalnoy_ayushcea"> <span class="sacheyes_knopka">×</span> <h1>Как создать модальное всплывающее окно с CSS и JavaScript для сайта.</h1> </div> </div> CSS Код .dialogovo_okno { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modalnoy_ayushcea { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fdfafa; padding: 1rem 1.5rem; width: 35rem; border-radius: 0.3rem; border: 2px solid #aba2a2; box-shadow: 0px 0px 14px 11px rgba(93, 86, 86, 0.7), 1px 0px 15px -15px rgba(140, 140, 140, 0); } .sacheyes_knopka { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .sacheyes_knopka:hover { background-color: darkgray; } .show-dialogovo_okno { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .modalnoya { background-color: #2767b0; color: #fbf2f2; padding: 12px 8px; font-size: 17px; font-weight: bold; border: none; cursor: pointer; width: 258px; border-radius: 100px; border: 2px solid #fdfdfd; box-shadow: 0px 0px 11px 1px rgba(76, 76, 76, 0.78), 0px 0px 4px 1px rgba(60, 60, 60, 0.66); } JS Код var dialogovo_okno = document.querySelector(".dialogovo_okno"); var modalnoya = document.querySelector(".modalnoya"); var closeButton = document.querySelector(".sacheyes_knopka"); function toggledialogovo_okno() { dialogovo_okno.classList.toggle("show-dialogovo_okno"); } function windowOnClick(event) { if (event.target === dialogovo_okno) { toggledialogovo_okno(); } } modalnoya.addEventListener("click", toggledialogovo_okno); closeButton.addEventListener("click", toggledialogovo_okno); window.addEventListener("click", windowOnClick); Теперь вы знаете, как можно быстро установить всплывающие окна с помощью CSS и JavaScript. Где при клике оно покажется по центру монитора иди мобильного экрана. Также на счет оформления, то здесь добавлен обвод на пару пикселей и прописаны тени, что если выставлять на темный формат, то нужно цветовую гамму скорректировать под основной стиль сайта. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |