Tag: modal

Simple modal HTML dialog overlay

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 🙂

05/07/2014