Click here to Skip to main content
15,870,297 members
Articles / Web Development / XHTML

Masked Div Or Modal Popup Window

Rate me:
Please Sign up or sign in to vote.
4.71/5 (29 votes)
9 Apr 2009CPOL4 min read 179.7K   5.7K   57   22
A Masked div or modal popup window is a child window created from the parent window which prevents the user from interacting with it before they can return to the parent application. Modal windows are commonly used in applications to control user awareness and to display critical notices. This maske
Image 1

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. 

Masked.PNG 

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.  

ModalPopup.PNG

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. 

ModalPopup2.PNG 

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. 

ASP.NET
<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.

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

Below is the Java script code

JavaScript
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 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.

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.   

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Birla Soft
India India
Najmul Hoda is a Master of Computer Application.
He has worked with .Net technologies in web development and has been programming since 2007.
He is very comfortable in various languages,RDBMS,C# to VB.NET with Access & MS SQLServer from Javascript,AJAX to ASP.NET, MVC.


Khata Wata (Free Online Udhar Khata, Bahi Khata)
Download from play store


Comments and Discussions

 
GeneralMy vote of 5 Pin
david2006es15-Jun-12 0:36
david2006es15-Jun-12 0:36 
QuestionHelp me, please Pin
alifdadyah2-Feb-12 17:43
alifdadyah2-Feb-12 17:43 
AnswerRe: Help me, please Pin
Najmul Hoda3-Feb-12 4:10
Najmul Hoda3-Feb-12 4:10 
GeneralRe: Help me, please Pin
alifdadyah3-Feb-12 19:23
alifdadyah3-Feb-12 19:23 
GeneralThank you. It's the perfect sample. Perfect code and explonation. My vote - 5. Pin
mishkasp28-Jul-11 6:13
mishkasp28-Jul-11 6:13 
GeneralRe: Thank you. It's the perfect sample. Perfect code and explonation. My vote - 5. Pin
Najmul Hoda28-Jul-11 9:47
Najmul Hoda28-Jul-11 9:47 
GeneralMy vote of 5 Pin
ruzgaray19-Aug-10 3:27
ruzgaray19-Aug-10 3:27 
GeneralRefresh parent page on closing modal child window/popup Pin
elizas23-Mar-10 1:49
elizas23-Mar-10 1:49 
GeneralDiv Modal popup making problem Pin
Ashish525-Feb-10 20:09
Ashish525-Feb-10 20:09 
GeneralNice Article Pin
abhishekYu23-Sep-09 6:35
abhishekYu23-Sep-09 6:35 
Questioncouple of questions Pin
leyan8316-Jul-09 9:53
leyan8316-Jul-09 9:53 
AnswerRe: couple of questions Pin
leyan8316-Jul-09 10:52
leyan8316-Jul-09 10:52 
SuggestionRe: couple of questions - vote of 5 Pin
david2006es15-Jun-12 0:35
david2006es15-Jun-12 0:35 
Generalthe best article to understand the concept of Modal Popup Window Pin
ravinegi27-May-09 21:02
ravinegi27-May-09 21:02 
GeneralPlease add ModalPopup CSS definition to article Pin
wldkrd18-Apr-09 12:16
wldkrd18-Apr-09 12:16 
QuestionMaster Page Problem Pin
Mohamad Kaifi24-Mar-09 2:32
Mohamad Kaifi24-Mar-09 2:32 
GeneralI like this Pin
Vimalsoft(Pty) Ltd13-Feb-09 2:13
professionalVimalsoft(Pty) Ltd13-Feb-09 2:13 
GeneralWow! Great article. Pin
Farrru2-Jan-09 4:15
Farrru2-Jan-09 4:15 
GeneralRe: Wow! Great article. Pin
Najmul Hoda15-Jan-09 0:51
Najmul Hoda15-Jan-09 0:51 
GeneralMy vote of 1 Pin
KamranShahid31-Dec-08 22:28
KamranShahid31-Dec-08 22:28 
GeneralRe: My vote of 1 Pin
Vimalsoft(Pty) Ltd13-Feb-09 2:05
professionalVimalsoft(Pty) Ltd13-Feb-09 2:05 
GeneralMy vote of 1 Pin
mvbon31-Dec-08 9:33
mvbon31-Dec-08 9:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.