/
WiDeMo
/
Test
Обзор
Документация
Войти
/
WiDeMo
/
Test
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
64 строки
2 KB
WiDeMo
upload files
17 дек 2025, 11:06
17 дек 2025, 11:06
3d624a5
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Custom Alert Box</title> <link rel="stylesheet" href="alert.css"> </head> <body> <div class="container"> <h1> Welcome to GeeksforGeeks Custom Alerts </h1> <p> This is a simple example of a custom alert box using HTML, CSS, and JavaScript. </p> <p> Click the button below to trigger the custom alert. </p> <button class="custom-button"> Show Alert </button> </div> <div id="customAlertBox" class="custom-alert"> <div class="custom-alert-content"> <span class="close">×</span> <p id="alertMessage"></p> </div> </div> <script> let alertBox = document.getElementById("customAlertBox"); let alert_Message_container = document.getElementById("alertMessage"); let custom_button = document.querySelector(".custom-button"); let close_img = document.querySelector(".close"); let body = document.querySelector("body"); custom_button.addEventListener ('click', function () { alert_Message_container.innerHTML = "You clicked the button"; alertBox.style.display = "block"; }); close_img.addEventListener ('click', function () { alertBox.style.display = "none"; }); </script> </body> </html>