Модальные окна попапы на html css javascript всплывающие окна как это сделать
Узнайте как создать красивые и полезные модальные окна попапы на HTML, CSS и JavaScript с примерами и подробными инструкциями.
Модальные окна или попапы в веб-разработке - это всплывающие окна, которые используются для предоставления ценной информации посетителям или для дополнительного функционала. Они часто применяются для создания отличного впечатления сайта и получения большего количества конверсий. Они просто выглядят красиво и интерактивно, поэтому с их помощью можно добиться превосходного дизайна и эффективности.
Как создать модальное окно используя HTML, CSS и JavaScript?
Создание модального окна можно выполнить с помощью HTML, CSS и JavaScript. Для начала необходимо создать базовую структуру документа. Это можно сделать с помощью нескольких тегов HTML:
<!DOCTYPE html>
<html>
<head>
<title>Modal Window</title>
</head>
<body>
</body>
</html>
Далее добавьте необходимые элементы для модального окна. Начните с контейнера, в который будет добавлено модальное окно. Назовите его «modal-container». Затем добавьте другой контейнер, в который будет добавлено модальное окно. Назовите его «modal». Также добавьте кнопку закрытия модального окна и назовите ее «close-modal-btn».
<div id="modal-container">
<div id="modal">
<button class="close-modal-btn">X</button>
</div>
</div>
Затем добавьте стили CSS, чтобы добавить стили контейнерам и модальному окну. Для этого нужно использовать следующий код:
#modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
}
#modal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
width: 50%;
padding: 25px;
box-sizing: border-box;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}
В последнем шаге добавьте код JavaScript для открытия и закрытия модального окна. Для этого нужно использовать следующий код:
// Get the modal
let modalContainer = document.getElementById('modal-container');
// Get the button that opens the modal
let openModalBtn = document.getElementById("open-modal-btn");
// Get the element that closes the modal
let closeModalBtn = document.getElementsByClassName("close-modal-btn")[0];
// When the user clicks the button, open the modal
openModalBtn.onclick = function() {
modalContainer.style.display = "block";
}
// When the user clicks on (x), close the modal
closeModalBtn.onclick = function() {
modalContainer.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalContainer) {
modalContainer.style.display = "none";
}
}
Это все, что нужно сделать, чтобы создать модальное окно с помощью HTML, CSS и JavaScript. После выполнения всех шагов вы должны иметь модальное окно, которое можно открыть и закрыть с помощью нажатия кнопки.
