On

Normally we use JS alert function to let users know something, which may not be supported in every platform. The alert box also comes with a Title "www.example.com" which is not editable at all. This is disgusting. So, it will be wise to use HTML Alert instead JS Alert Function. Here is a live preview of JS Window alert()


JS Window Alert



<button onclick="myFunction()">Button for JS Window Alert</button>

<script>
function myFunction() {
alert("Hi! This is JS Window Alert!");
}
</script>


HTML Alert

If you use HTML Alert, then it will be shown wherever you want in your html page, as plain text. Even you can modify the color, font, size - everything. Here is live preview below

  

<p><button type="button" id="alertButton">Button for HTML Alert</button></p>
<p id="alertMessage" style="color: red; display: none;"></p>
<script>

// HTML Alert
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com 
// Live Preview available at https://www.devilhunter.net/2025/01/html-alert.html  

function showAlert(message, alertMessageId) {
 const alertElement = document.getElementById(alertMessageId);
 if (alertElement) {
  alertElement.textContent = message; // Set the message
  alertElement.style.display = 'block'; // Show the alert

  // Automatically hide the alert after 5 seconds
 setTimeout(() => {
  alertElement.style.display = 'none'; // Hide the alert
  alertElement.textContent = ''; // Clear the message
  }, 5000);
  }
}

document.getElementById('alertButton').addEventListener('click', () => {
 showAlert('This is HTML Alert!', 'alertMessage');
});
</script>



Multiple HTML Alert

Not only that, you can use multiple HTML Alert Box in same page. 

 


<p><button type="button" id="alertButton1">Press Me 1</button></p>
<p id="alertMessage1" style="color: red; display: none;"></p>

<p><button type="button" id="alertButton2">Press Me 2</button></p>
<p id="alertMessage2" style="color: green; display: none;"></p>

<p><button type="button" id="alertButton3">Press Me 3</button></p>
<p id="alertMessage3" style="color: blue; display: none;"></p>

<script>

// HTML Alert
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com 
// Live Preview available at https://www.devilhunter.net/2025/01/html-alert.html  

// Reusable function to display a message in a specific <p> tag
function showAlert(message, alertMessageId) {
  const alertElement = document.getElementById(alertMessageId);
  if (alertElement) {
   alertElement.textContent = message; // Set the message
   alertElement.style.display = 'block'; // Show the alert

 // Automatically hide the alert after 5 seconds
  setTimeout(() => {
   alertElement.style.display = 'none'; // Hide the alert
   alertElement.textContent = ''; // Clear the message
   }, 5000);
  }
}

// Example: Attach multiple alerts to different buttons
document.getElementById('alertButton1').addEventListener('click', () => {
 showAlert('This is Alert 1!', 'alertMessage1');
});

document.getElementById('alertButton2').addEventListener('click', () => {
 showAlert('This is Alert 2!', 'alertMessage2');
});

document.getElementById('alertButton3').addEventListener('click', () => {
    showAlert('This is Alert 3!', 'alertMessage3');
});

</script>