Custom Alert Box using HTML/CSS/JS (No Browser alert)

By: fyvo August 4, 2025 JavaScript

Description

A fully styled modal alert replacement — no more ugly alert() calls. Easily customizable

Code Snippet

<style>
#custom-alert {
  position: fixed; top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  background: white; padding: 20px; border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: none;
}
#custom-alert.show { display: block; }
</style>

<div id="custom-alert">
  <p id="alert-message"></p>
  <button onclick="hideAlert()">OK</button>
</div>

<script>
function showAlert(msg) {
  document.getElementById('alert-message').innerText = msg;
  document.getElementById('custom-alert').classList.add('show');
}
function hideAlert() {
  document.getElementById('custom-alert').classList.remove('show');
}

// Example
// showAlert('This is a custom alert!');
</script>

Discussion (0)