Как в HTML сделать всплывающий слой, который автоматически закроется через некоторое время?
CSS, html, JavaScript

Как в HTML сделать всплывающий слой, который автоматически закроется через некоторое время?

Привет всем! Не очень распространенный, но все же вопрос, с которым вы наверняка сталкивались рано или поздно: «Как в HTML сделать всплывающий слой, который автоматически закроется через некоторое время?»

Используется эта штука в тех случаях, когда нужно показать некоторое уведомление, а потом его скрыть. Удобно, практично, визуально приятно. Ниже — код, который, надеюсь, вам поможет:

<html>
 
<head>
<title>Popup Example</title>
<style>
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid black;
display: none;
}
</style>
</head>
 
<body>
<div id="popup">Всплывающий слой</div>
 
<script>
setTimeout(function() {
document.getElementById("popup").style.display = "block";
}, 3000); // 3 секунды
 
setTimeout(function() {
document.getElementById("popup").style.display = "none";
}, 6000); // 6 секунды
</script>
</body>
 
</html>

Как видно из кода — у нас есть слой, к которому применяются css-стили (тут никаких границ для вашей фантазии нет, да и использовать стили можно из отдельного css-файла — я слил все в один файл, так сказать — для наглядности), а после — подключаем JavaScript, который будет показывать слой через 3 секунды после загрузки страницы, и скрывать его через 6 секунд.

Надеюсь, материал вам понадобился 🙂
В случае вопросов — пишите на почту, или в Telegram.