HTML-код всплывающего окна – как создать всплывающее окно в HTML

Вот пример HTML-кода для создания всплывающего окна:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Popup Example</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <button onclick="openPopup()">Open Popup</button>
    <div id="popup" class="popup">
        <h2>This is a Popup</h2>
        <p>Hello, world!</p>
        <button onclick="closePopup()">Close Popup</button>
    </div>
    <div id="overlay" class="overlay"></div>
    <script>
        function openPopup() {
            document.getElementById("popup").style.display = "block";
            document.getElementById("overlay").style.display = "block";
        }
        function closePopup() {
            document.getElementById("popup").style.display = "none";
            document.getElementById("overlay").style.display = "none";
        }
    </script>
</body>
</html>

В этом примере у нас есть кнопка с надписью «Открыть всплывающее окно», которая запускает функцию openPopup()при нажатии. Эта функция устанавливает стиль отображения всплывающих окон и элементов наложения на «блок», делая их видимыми. Всплывающее окно центрируется по экрану с помощью CSS.

Внутри всплывающего окна есть заголовок и абзац с примером содержимого, а также кнопка с надписью «Закрыть всплывающее окно». Нажатие этой кнопки запускает функцию closePopup(), которая скрывает элементы всплывающего окна и наложения, устанавливая для их стиля отображения значение «нет».