HTML Custom Alert Box

Welcome to GeeksforGeeks Custom Alerts

This is a simple example of a custom alert box using HTML, CSS, and JavaScript.

Click the button below to trigger the custom alert.

Show Alert

let custom_button = document.querySelector(".custom-button"); custom_button.addEventListener ('click', function () { Swal.fire({ title: 'Custom Alert', text: 'You clicked the button', icon: 'info', confirmButtonText: 'OK' }); }); CSS body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 800px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { font-size: 36px; color: #333; margin-bottom: 20px; } p { font-size: 18px; color: #666; margin-bottom: 10px; } .custom-button { padding: 10px 20px; font-size: 18px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .custom-button:hover { background-color: #45a049; } .custom-alert { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .custom-alert-content { background-color: #fefefe; margin-left: 30rem; margin-top: 20rem; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; border-radius: 8px; position: relative; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } #alertMessage { color: #45a049; }