Hidden Alert Message
Reveal content dynamically. Instead of using a blocking popup window, use this script to show an inline alert message that was previously hidden from view.
Surprise!
I was hidden in the code until you clicked the button.
Copy the Script
<style>
.hidden-box { display: none; padding: 10px; background: #e2e3e5; border: 1px solid #d6d8db; }
</style>
<div id="myMsg" class="hidden-box">
This is a hidden message.
</div>
<button onclick="toggleVisibility()">Show/Hide</button>
<script>
function toggleVisibility() {
var x = document.getElementById("myMsg");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>Frequently Asked Questions
Yes. The element starts with CSS 'display: none' (or visibility: hidden) and the JavaScript changes it to 'display: block' when triggered.
Yes. You can use 'setTimeout' to set the display back to none after a few seconds, creating a temporary 'toast' notification effect.
To be fully accessible, ensure you add 'role=alert' to the container so screen readers announce the message when it appears.