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.
See the picture below.
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.
/* ieWin only stuff */
_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.
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">
<td align="left" style="width: 40%; background-color:#003399; color :White; font-weight:bold";valign="top" >
<td style="width: 60%;background-color:#003399; color :White; font-weight:bold;" align="right" valign="top">
Enter your name:
<input type ="text" id="txtName" value ="" />
<td colspan ="2" align ="center" >
Below is the Java script code
document.getElementById ('ModalPopupDiv').style.top= Math.round ((document.documentElement.clientHeight/2)+ document.documentElement.scrollTop)-100 + 'px';
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 popup tdDisplayName'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.
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.
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.