Создание всплывающего модального окна на чистом JavaScript -- форма поверх страницы, пример кода
Primary tabs
В данной статье я опишу процесс создания простого всплывающего окна с затемнением экрана с использованием чистого JavaScript (никаких библиотек), html и css.
Опишем последоватльность действий, которые будут на странице.
- Есть веб-страница с книпкой, при нажатии которой активируется скрипт
- Скрипт добавляет в DOM-модель документа (встраивает новый элемент структуру страницы) новый div с определенным стилем, а именно - размер на всю страницу, полупрозрачный, серого цвета, поверх всех элементов. Как вы уже догадались, это затемнение экрана.
- Далее скрипт меняет стиль отображения заранее подготовленного эелемента - нашего модального всплывающего "окна". Окно отображается фиксированно поверх слоя затемнения.
Собственно говоря, это вся логика работы. Теперь я приведу целиком весь код с комментариями.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Простое модальное окно</title> <style> .modalwin { height: 200px; width: 300px; border: 3px outset gray; background: wheat; top: 20%; /* отступ сверху */ right: 0; left: 0; font-size: 14px; margin: 0 auto; z-index:2; /* поверх всех */ display: none; /* сначала невидим */ position: fixed; /* фиксированное позиционирование, окно стабильно при прокрутке */ padding: 15px; border: 1px solid #383838; } #shadow { position: fixed; width:100%; height:100%; z-index:1; /* поверх всех кроме окна*/ background:#000; opacity: 0.5; /*прозрачность*/ left:0; top:0; } </style> <script type="text/javascript"> function showModalWin() { var darkLayer = document.createElement('div'); // слой затемнения darkLayer.id = 'shadow'; // id чтобы подхватить стиль document.body.appendChild(darkLayer); // включаем затемнение var modalWin = document.getElementById('popupWin'); // находим наше "окно" modalWin.style.display = 'block'; // "включаем" его darkLayer.onclick = function () { // при клике на слой затемнения все исчезнет darkLayer.parentNode.removeChild(darkLayer); // удаляем затемнение modalWin.style.display = 'none'; // делаем окно невидимым return false; }; } </script> </head> <body style="text-align: center"> <h1> Веб-страница </h1> <form> <input type="button" value="Вызвать окно" onclick="showModalWin()"> </form> <!-- Наше модальное всплывающее окно --> <div style="text-align: center" id="popupWin" class="modalwin"> <h2> Какая-то форма </h2> <form> <input value="text"> <input type="button" value="OK"> </form> <hr> <h2> Какой-то текст </h2> <br> <p> УРа!!!!!!!!!! </p> <hr> </div> </body> </html>
Обратите в внимание на свойство z-index в css. Оно весьма важно, так как определяет положение элемента относительно других, а именно наскольно элемент "близко" к пользователю, так называемая позиция на оси z, которая направлена на человека. По умолчанию это свойство равно 0, поэтому значение 1 для затемнения позволяет перекрыть все элементы, а значение 2 у "окна" выводит его на передний план.
Работать с "окном" можно также, как и с любым другим элементом на странице - например, встроить в него форму регистрации или что еще.
Ну вот и все, осталось только сохранить выше приведенный код в файл .html и открыть его в своем браузере. Удачи !!!
- Log in to post comments
- 24384 reads