Create a modal window in Javascript and CSS

Thursday, February 17, 2011 EST

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>

• Download PDF*
• View/post comments
• Link to this article
• Print this article
• Bookmark this article