Модальное всплывающее окно на CSS
 | |
| В этом мануале мы будем создавать простой и полностью рабочее и отвечающее по характеристикам модальное окно, где задействуем CSS и JavaScript. Где устанавливать, то здесь сам веб мастер решит, это может быть как обратная связь или форма регистраций. Так как не нужно забывать, что формат такого окна, это идет дополнение стандартной страницы, но с плюсом, который заключается в том, что его по умолчанию можно спрятать. Но когда вам нужно вписать то или иное описание, что прописано в модальном окне, то по клику вы его вызываете. Где само появление красиво происходит, это изначально идет небольшая вспышка, и по центру выскакивает каркас окна. Затем с помощью другого класса мы размещаем фактический модальный режим в центре экрана с некоторыми визуальными эффектами, что можно самостоятельно под стиль дизайна настроить. Такой формат окна используются довольно часто на многих сайтах, где тематика может быть разнообразной, ведь по своему дизайну его не закрепить за темой. Некоторые из них часто используются для регистрации подписки на новостную рассылку, отображения уведомлений и предупреждений, а также для обработки форм регистрации и входа в систему. Это изначально создает оригинальным, где также будет и универсальным, что означает его разнообразное использование идет его для любых целей. Приступаем к установке: Давайте рассмотрим как реально смотрится окно, так как было проверено на работоспособность на тестовой площадке, где по умолчанию немного переделано, все по мелочам, это оттенок цвета и выключать, что изначально под несколько пикселей углы закруглены, а сейчас кнопка круглая.  Это как раз то открытие, где идет затемненный фон, что не стал его сильно под палитру темную ставить, а немного темно серая палитра в полу прозрачной форме.  Приступаем к установке: HTML Код <button class="kubesinav">Вызова модального окна</button> <div class="dakageonuvem"> <div class="vedanacu-macesogam"> <span class="necludevaga-monsunedsag">×</span> <h1>Модальное всплывающее окно CSS</h1> <p class="bukas">Здесь описание под заголовком</p> </div> </div> CSS Код .dakageonuvem { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(33, 31, 31, 0.53); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .vedanacu-macesogam { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fbfbfb; padding: 7px 10px; width: 41%; border-radius: 5px; font-size: 10px; border: 2px solid #aaabad; } .necludevaga-monsunedsag { float: right; width: 28px; line-height: 28px; text-align: center; cursor: pointer; border-radius: 85px; background-color: #dcd6d6; border: 2px solid #bdb7b7; } .necludevaga-monsunedsag:hover { background-color: darkgray; } .nesnamuseg-koundakageon { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .kubesinav { background-color: #b02794; color: #f5f1f1; padding: 12px 8px; font-size: 17px; font-weight: bold; border: none; cursor: pointer; width: 270px; border-radius: 100px; border: 2px solid #fdfdfd; box-shadow: 0px 0px 11px 1px rgba(82, 80, 80, 0.78), 0px 0px 4px 1px rgba(27, 25, 25, 0.66); } .bukas { font-size: 15px; text-align: justify; } JS Код var dakageonuvem = document.querySelector(".dakageonuvem"); var kubesinav = document.querySelector(".kubesinav"); var closeButton = document.querySelector(".necludevaga-monsunedsag"); function toggledakageonuvem() { dakageonuvem.classList.toggle("nesnamuseg-koundakageon"); } function windowOnClick(event) { if (event.target === dakageonuvem) { toggledakageonuvem(); } } kubesinav.addEventListener("click", toggledakageonuvem); closeButton.addEventListener("click", toggledakageonuvem); window.addEventListener("click", windowOnClick); Во-первых, у нас есть button, которое при нажатии запускает модальное окно, что его как кнопку немного по стилистике доработали, чтоб была более современной. Но и сам контент, который будет помещен в модальное окно, где присутствует кнопка закрытия. Стили для класса позволяют создавать полупрозрачный темный цвет фона позади модального, когда он активен. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
