Friday, March 14, 2008

How To Open Modal Window(javascript and Html) 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <style type="text/css">
.modalPopup{
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    background:#ccc;
}
.modalPopupInner{
    width:300px;
    margin:100px auto 0px;
    background:#ffc;
    top: 100px;
}
</style>

    <script type="text/javascript">
window.onload = function () {
 var modal = document.getElementById("modal");
 modal.style.display = 'none';
}
function openpopup()
{
 var modal = document.getElementById("modal");
 modal.style.display = 'block';
}
function closepopup()
{
 var modal = document.getElementById("modal");
 modal.style.display = 'none';
}
    </script>

</head>
<body>
    <div>
        <h1>
            Normal content</h1>
        <p>
            Normal page content goes here...</p>
        <p>
            <a href="javascript:openpopup();">Open Pop Up</a></p>
    </div>
    <div class="modalPopup" id="modal">
        <div class="modalPopupInner">
            <p>
                Here is the popup!</p>
            <p>
                <a href="javascript:closepopup();">Close Pop Up</a></p>
        </div>
    </div>
</body>
</html>

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)