JS / CSS Popup

A simple popup using CSS and JS

by burhans

HTML

<div id="body">
This is the text in the normal part of the div.
<br/>
Click <a id="showLink" href="#">here</a> to show the dialog.
</div>
<div id="dialog" class="hide">
This is the dialog
<br/>
<a id="closeLink" href="#">close</a>
</div>
<div id="mask" class="hide">
</div>

CSS

body
{
    background-color: AliceBlue;
}

#body
{
    background-color: AntiqueWhite;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    height: 99%;
    width: 99%;
    z-index: 100;
}

#dialog
{
    background-color: AliceBlue;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    left: 5em;
    height: 5em;
    position: absolute;
    top: 10em;
    width: 10em;
    z-index: 200;
}

#mask
{
    background-color: LightSteelBlue;
    border-style: none;
    left: 0px;
    height: 100%;
    opacity:0.5;
    filter:Alpha(opacity=50); /* IE8 and earlier */
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 110;
}

.hide
{
    display: none;
}

.show
{
    display: show;
}

JavaScript

$(document).ready(function()
        {
            $("#showLink").click(function()
            {
                $("#mask").removeClass("hide");
                $("#dialog").removeClass("hide");
                $("#mask").addClass("show");
                $("#dialog").addClass("show");
            });
            
            $("#closeLink").click(function()
            {
                $("#mask").removeClass("show");
                $("#dialog").removeClass("show");
                $("#mask").addClass("hide");
                $("#dialog").addClass("hide");
            });
        });