Java-Scripts.net

Custom Alert Box

Take full control of your notifications. This script creates a lightweight HTML modal that serves as a modern replacement for the system's default alert() function.

Copy the Script

<style>
/* The Modal Background */
.modal-overlay {
  display: none; position: fixed; z-index: 1000;
  left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}
/* The Box */
.modal-content {
  background-color: #fff; margin: 15% auto;
  padding: 20px; border: 1px solid #888;
  width: 80%; max-width: 400px; text-align: center;
  border-radius: 8px;
}
</style>

<!-- The HTML Structure -->
<div id="myAlert" class="modal-overlay">
  <div class="modal-content">
    <h3>Alert</h3>
    <p>This is a custom alert message.</p>
    <button onclick="closeAlert()">OK</button>
  </div>
</div>

<script>
function showAlert() { document.getElementById('myAlert').style.display = 'block'; }
function closeAlert() { document.getElementById('myAlert').style.display = 'none'; }
</script>

Frequently Asked Questions

No, this creates a 'pseudo-window' using HTML DIVs and CSS positioning (z-index). It overlays your content but stays within the same browser tab.

Yes! Unlike standard alerts which only accept text, you can put images, forms, videos, or formatted text inside this custom box.