Masked Div Or Modal Popup Window

Introduction

What does Masked Div or Modal Popup Window mean ?

A Masked div or modal popup window is a child window created from the parent window which

prevents the user from interacting with parent window before he returns to the parent application. Modal popup windows are commonly used in applications to control user awareness and to display critical notices. This masked div serves same functionality as the Ajax Modal popup that servers the same purpose in Asp.net without any complex coding.

Using the code

To make a masked div and modal popup window I have created two div MaskedDiv to create a mask over the parent window and a ModalPopupDiv to create modal popup window. A css file style.css is used to set the style of the two div and a Java Script file maskdiv.js is used to to call the functions to show and hide the masked div and popup window. There is an image mask.png which is used as the transparent background of the masking div.

See the picture below I am explaining step by step.undefined

In the above picture there is link 'Click here to show the masked popup'. On clicking the link a javascript function OpenModelPopup() is called thatt will open masked div and a popup window that will asked to input name.

See the picture below.

From this window you wont be able to switch to the parent window until you close the popup window. Enter your name and click on submit button a javascript funcion Submit will be called that will close the window and your name will pe displayed on the parent window as shown below.

Code description

I have used an .aspx page that has two div 1) MaskedDiv and 2) ModalPopupDiv

MaskedDiv serves the purpose of masking the parent window. It has a css class MaskedDiv that sets its properties.

<div id="MaskedDiv" class ="MaskedDiv"></div>

Below is the css class for MaskedDiv.

div.MaskedDiv 
{
	visibility: hidden;
	position:absolute;
	left:0px;
	top:0px;
	font-family:verdana;
	font-weight:bold;
	padding:40px;
    z-index:100;
	background-image:url(Mask.png);
	/* ieWin only stuff */
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Mask.png');
} 

I have set the visibility to hidden so that when it is page is loaded first time it will not be shown.

and top property of the div is set to 0px so that the div will open from top left of the screen.

Width and height of the div is determined at runtime in the javascript. To make mask over parent window what we need to do is to cover up the parent window by the any div. So in javascript we find the screen width and height and set it to maskedDiv's width and height that covers the parent window.

z-index is set to 100 so that will appear above the parent page.

Back-ground image is set to mask.png image. This image is transparent enough to view the parent content from the masked div.

The ModalPopupDiv is modal popup window that ask for the input and on submitting its displays the name at parent window.

<div id="ModalPopupDiv" class="ModalPopup">
        <table width="100%" cellpadding="2" cellspacing="0" border="0">
            <tr>
                <td align="left" style="width: 40%; background-color:#003399; color :White; font-weight:bold";valign="top" >
                    Modal Popup
                </td>
                <td style="width: 60%;background-color:#003399; color :White; font-weight:bold;" align="right" valign="top">
                    <a href="javascript:void(0);" onclick="javascript:CloseModelPopup();" style ="color :White;">Close</a>
                </td>
            </tr>
            <tr>
            <td>
                Enter your name: 
            </td>
            <td>
            <input type ="text" id="txtName" value ="" />
            </td>
            </tr>
            <tr>
            <td colspan ="2" align ="center" >
                  <a href="javascript:void(0);" onclick="javascript:Submit();">Submit</a>
            </td>
            </tr>
        </table>
    </div>

To open a the masked div I have used a javascript function showModalPopup() which is called from a link.

<a href="javascript:void(0);" onclick="javascript:OpenModelPopup();">Click here to show the masked popup.</a>

Below is the Java script code

function OpenModelPopup()
    { 
        document.getElementById ('tdDisplayName').innerHTML='';
        document.getElementById ('txtName').value='';
        document.getElementById ('ModalPopupDiv').style.visibility='visible';
        document.getElementById ('ModalPopupDiv').style.display='';
        document.getElementById ('ModalPopupDiv').style.top= Math.round ((document.documentElement.clientHeight/2)+ document.documentElement.scrollTop)-100 + 'px';
        document.getElementById ('ModalPopupDiv').style.left='400px';
        
        document.getElementById ('MaskedDiv').style.display='';
        document.getElementById ('MaskedDiv').style.visibility='visible';
        document.getElementById ('MaskedDiv').style.top='0px';
        document.getElementById ('MaskedDiv').style.left='0px';
        document.getElementById ('MaskedDiv').style.width=  document.documentElement.clientWidth + 'px';
        document.getElementById ('MaskedDiv').style.height= document.documentElement.clientHeight+ 'px';
    }

In the OpenModelPopup() function you will see tdDisplayName. This is a td in the parent window whose innerHTML is set to blank first. At the popup window u will be asked to enter your name and after submitting data form the modal popuptdDisplayName's innerHTML is set to your name.

After this I have set the position of the modal popup window div and masked div and made these div visible.

On clicking on submit button in modal popup window a javascript function Submit is called that set the inner text of tdDisplayName to the text you have enter in the text box and will close the popup window.

At the modal popup window you will see a close link. On clicking on the link the a javascript function CloseModalPopup is called and modal popup is close.

Points of Interest

I have used a png image for making mask. I could use color as background and sets its opacity but since opera does not support opacity so I had to use its substitute as transpartent png image that provides the same effect.

Here you will find something interesting. You will see here modal popup div appears above the masked div.

How ????????????????????

Because in the .css I have set the z-index property of the both div.... The masked div must has z-index value less than the modal popup window div so that it will appear above the masked div.

Sample Project Source

Download source files -4 kb