In case you don’t want to deploy full fledged JavaScript libraries, such as jQuery or Dojo, to implement a simple modal HTML dialog overlay here is a quick and easy way to do so based on plain HTML, CSS and JavaScript. It works on all modern browsers.
First, let’s have a look at the CSS code:
#DialogOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
display: none;
}
#DialogOverlayContent {
position: absolute;
top: 40%;
left: 15%;
color: #000;
text-align: center;
width: 70%;
height: 200px;
z-index: 999999;
background: rgba(255, 255, 255, 1);
border: 2px solid;
border-radius: 25px;
}
#DialogOverlayContent > p {
color: #000;
margin-top: 50px;
}
And the corresponding JavaScript code:
function showFormDialog() {
// using plain JavaScript
document.getElementById('DialogOverlay').style.display = 'block';
// using jQuery
// $('#DialogOverlay').css('display', 'block');
}
function closeDialog() {
// using plain JavaScript
document.getElementById("DialogOverlay").style.display = 'none';
// using jQuery
// $("#DialogOverlay").css('display', 'none');
}
And finally the HTML code:
<div id="DialogOverlay">
<div id="DialogOverlayContent">
<p><img src="images/loading.gif" alt="" width="30" height="30" style="margin-right: 20px;"/>
Please stand by while we process your request...<br/><br/>
Please do not hit refresh, you will be redirected shortly!<br/><br/>
<a href="#" onclick="closeDialog();">Close</a></p>
</div>
</div>
A complete example can be found here:
<html>
<head>
<title>Simple modal HTML dialog overlay</title>
<script>
function showFormDialog() {
// using plain JavaScript
document.getElementById('DialogOverlay').style.display = 'block';
// using jQuery
// $('#DialogOverlay').css('display', 'block');
}
function closeDialog() {
// using plain JavaScript
document.getElementById("DialogOverlay").style.display = 'none';
// using jQuery
// $("#DialogOverlay").css('display', 'none');
}
</script>
<style>
#DialogOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
display: none;
}
#DialogOverlayContent {
position: absolute;
top: 40%;
left: 15%;
color: #000;
text-align: center;
width: 70%;
height: 200px;
z-index: 999999;
background: rgba(255, 255, 255, 1);
border: 2px solid;
border-radius: 25px;
}
#DialogOverlayContent > p {
color: #000;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="DialogOverlay">
<div id="DialogOverlayContent">
<p><img src="images/loading.gif" alt="" width="30" height="30" style="margin-right: 20px;"/>
Please stand by while we process your request...<br/><br/>
Please do not hit refresh, you will be redirected shortly!<br/><br/>
<a href="#" onclick="closeDialog();">Close</a></p>
</div>
</div>
<a href="#" onclick="showFormDialog();">Open dialog</a>
</body>
</html>
That’s it, pretty simple but effective 🙂
Leave a Reply