Очень простое всплывающее окно на чистом HTML CSS JS
Добавить в избранное
Добро пожаловать в краткий учебник о том, как создать простое всплывающее окно с помощью HTML, CSS и Javascript. Я уверен, что в Интернете существует множество плагинов для всплывающих окон, но некоторые из них зависят от сторонних фреймворков и добавляют слишком много нагрузки.
popup.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Очень простое всплывающее окно на чистом HTML CSS JS</title>
<!-- (A) CSS + JS -->
<link rel="stylesheet" href="popup.css"/>
<script src="popup.js"></script>
</head>
<body>
<!-- (B) кнопка вызывающая окно -->
<input type="button" onclick="pop.open('Заголовок', 'Привет мир')" class="opButton" value="Показать"/>
</body>
</html>
A. Включаем CSS и Javascript в наш проект.
B. Вызов pop.open('Заголовок', 'Привет мир'), чтобы показать всплывающее окно.
popup.js
// (A) всплывающие окно
pWrap: null, // всплывающая оболочка
pTitle: null, // заголовок всплывающего окна
pText: null, // всплывающий текст
init : () => {
// (A1) Обертка всплывающих окон
pop.pWrap = document.createElement("div");
pop.pWrap.id = "popwrap";
document.body.appendChild(pop.pWrap);
// (A2) содержимое всплывающего окна
pop.pWrap.innerHTML =
`<div id="popbox">
<h1 id="poptitle"></h1>
<p id="poptext"></p>
<div id="popclose" onclick="pop.close()">☒</div>
</div>`;
pop.pTitle = document.getElementById("poptitle");
pop.pText = document.getElementById("poptext");
},
// (B) открыть всплывающее окно
open: (title, text) => {
pop.pTitle.innerHTML = title;
pop.pText.innerHTML = text;
pop.pWrap.classList.add("open");
},
// (C) закрыть окно
close : () => { pop.pWrap.classList.remove("open"); }
};
window.addEventListener("DOMContentLoaded", pop.init);
Да, поначалу это может показаться довольно запутанным для новичка. Но сохраняйте спокойствие и смотрите внимательно. Здесь всего 3 функции.
A. init() вызывается при загрузке страницы, все, что он делает, это создает HTML для всплывающего окна.
B. open() используется для отображения всплывающего окна, просто укажите заголовок и текст.
C. close() закроет всплывающее окно.
всплывающее окно HTML
<h1 id="poptitle">Заголовок</h1>
<p id="poptext">Привет мир</p>
<div id="popclose">☒</div>
</div></div>
Это HTML-код, который pop.init() вставляется в файл <body>. Это должно быть довольно понятно:
• <div id="popwrap"> полноэкранная «обложка» и обертка всплывающего окна.
• <div id="popbox"> само всплывающее окно.
• <h1 id="poptitle"> заголовок диалогового окна.
• <p id="poptext"> текст диалогового окна.
• <div id="popclose"> кнопка закрытия.
popup.css
* {
font-family: arial, sans-serif;
}
/* стили кнопки */
.opButton {
background-color: green;
color: #fff;
font-size: 20px;
padding: 5px 10px;
}
/* (A) Обёртка всплывающего окна */
#popwrap, #popwrap * {
box-sizing: border-box;
}
#popwrap {
/* (A1) ПОЛНОЭКРАННЫЙ */
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
/* (A2) СКРЫТО ПО УМОЛЧАНИЮ */
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
/* (A3) ПОКАЗАТЬ ВСПЛЫВАЮЩЕЕ ОКНО */
#popwrap.open {
opacity: 1;
visibility: visible;
}
/* (B) само всплывающее окно */
#popbox {
/* (B1) АБСОЛЮТНЫЙ ЦЕНТР */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* (B2) адаптивность */
min-width: 320px;
max-width: 600px;
}
/* (C) ЗАГОЛОВОК, ТЕКСТ, КНОПКА ЗАКРЫТЬ */
#poptitle {
background: #000;
}
#poptext {
background: red;
color: #fff;
}
#poptitle, #poptext {
padding: 10px;
margin: 0;
}
#poptitle, #popclose {
font-size: 28px;
color: #fff;
}
#popclose {
position: absolute;
top: 5px; right: 5px;
cursor: pointer;
}
Просто куча косметики, ключевая механика:
• Пусть обертка покрывает весь экран — #popwrap { position: fixed; top: 0; left: 0; z-index: 99; width: 100vw; height: 100vh; }
• Отцентрируйте всплывающее окно на экране – #popbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
• Скрыть всплывающее окно по умолчанию – #popwrap { opacity: 0; visibility: hidden; }
• Мы будем использовать JavaScript для переключения между отображением и скрытием. #popwrap.open { opacity: 1; visibility: visible; }
Вы можете посмотреть и скачать скрипт.
Посмотреть
Скачать