Create a modal window in Javascript and CSS

Posted on Wednesday February 16, 2011 by Eric Potvin

Modal dialog is one of great functionality to let the user focus on one particular action he needs to take. In C++ or other languages it's easy to create a modal window. Unfortunately, for Web, it is not by simple calling one function.

Here's the code to implement a modal window using HTML, CSS and Javascript

CSS Code

body {
    margin: 0px;
}
#modalWindowWrapper {
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}
.modalWindowBack {
    -moz-opacity:0.4;
    opacity:0.4;
    width:100%;
    height:100%;
    background-color:#999999;
    position:absolute;
    z-index:500;
    top:0px;
    left:0px;
}
.modalWindowContainer {
    position:absolute;
    width:300px;
    left:50%;
    top:50%;
    z-index:750;
}
.modalWindow {
    background:#CEDCFF;
    border:solid 1px #15295A;
    position:relative;
    top:-150px;
    left:-200px;
    z-index:1000;
    width:400px;
    height:100px;
    padding:10px;
    font:normal 12px verdana;
}

Javascript Code

var disableScroll = 0;
function ScrollingDetected() {
    if(disableScroll) {
        window.scrollTo(0,0);
    }
}

if(window.addEventListener) {
    window.addEventListener("scroll", ScrollingDetected, false);
}
else if(document.addEventListener) {
    document.addEventListener("scroll", ScrollingDetected, false);
}
else if("onscroll" in self) {
    self.onscroll = ScrollingDetected;
}
function revealModal(id) {
    disableScroll = 1;
    document.getElementById(id).style.display = "block";
}
function hideModal(id) {
    disableScroll = 0;
    document.getElementById(id).style.display = "none";
}
function showMessage() {
    document.getElementById('result').innerHTML = 'You click no';
}
function resetMessage() {
    document.getElementById('result').innerHTML = '';
}

HTML Code

<div id="modalWindowWrapper">
    <div class="modalWindowBack"></div>
    <div class="modalWindowContainer">
        <div class="modalWindow">
            This is a modal window.
            <br/><br/>
            Do you want to close this window?
            <input type="button" value="Yes" onclick="hideModal('modalWindowWrapper');resetMessage();">
            <input type="button" value="No" onClick="showMessage();">
            <br/>
            <br/>
            <div id="result"></div>
        </div>
    </div>
</div>