Click here to Skip to main content
Click here to Skip to main content

Masked Div Or Modal Popup Window

, 9 Apr 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
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

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. 

<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 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)

Share

About the Author

Najmul Hoda
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 & platforms from C# to VB.NET with Access & MS SQLServer
from Javascript,AJAX to ASP.NET.
 
Besides programming he loves playing mouth organ, guitar, listening to music,singing, bike riding & cricket.


Najmul's Articles
 
You can get my all article at
www.dotnetlogix.com


Comments and Discussions

 
GeneralMy vote of 5 Pinmemberdavid2006es15-Jun-12 0:36 
QuestionHelp me, please Pinmemberalifdadyah2-Feb-12 17:43 
Hi Najmul Hoda,
 
Your article is very helpful. But I need a little help, since I have many cells as 'tdDisplayName' in your page, generated from For..Next looping in a table. Those cells contain link with the text I want to change using the modal popup. In other words, the modal-popup will show up everytime I click the link in each cell, in order to change the link text.
How to set the value of the VALUEtoCHANGE if I can't point out the location precisely?
This is my code:
<table>
 <%  For i As Integer = 0 To (a.Length - 1)%>
        <tr><td rowspan="5"><% a(i).ToString %></td>
            <td>TEXT2</td>
            <td>TEXT3</td>
            <% For x as Integer = 1 to 30 %>
            <td>
            <a href="javascript:void(0);" onclick="javascript:OpenModelPopup();" id="tar">VALUEtoCHANGE</a></td>
            <%Next%>
        </tr>
    <%Next%>
</table>
 
Thanks a lot for your help,,
AnswerRe: Help me, please PinmemberNajmul Hoda3-Feb-12 4:10 
GeneralRe: Help me, please Pinmemberalifdadyah3-Feb-12 19:23 
GeneralThank you. It's the perfect sample. Perfect code and explonation. My vote - 5. Pinmembermishkasp28-Jul-11 6:13 
GeneralRe: Thank you. It's the perfect sample. Perfect code and explonation. My vote - 5. PinmemberNajmul Hoda28-Jul-11 9:47 
GeneralMy vote of 5 Pinmemberruzgaray19-Aug-10 3:27 
GeneralRefresh parent page on closing modal child window/popup Pingroupelizas23-Mar-10 1:49 
GeneralDiv Modal popup making problem PinmemberAshish525-Feb-10 20:09 
GeneralNice Article PinmemberabhishekYu23-Sep-09 6:35 
Questioncouple of questions Pinmemberleyan8316-Jul-09 9:53 
AnswerRe: couple of questions Pinmemberleyan8316-Jul-09 10:52 
SuggestionRe: couple of questions - vote of 5 Pinmemberdavid2006es15-Jun-12 0:35 
Generalthe best article to understand the concept of Modal Popup Window Pinmemberravinegi27-May-09 21:02 
GeneralPlease add ModalPopup CSS definition to article Pinmemberwldkrd18-Apr-09 12:16 
QuestionMaster Page Problem PinmemberMohamad Kaifi24-Mar-09 2:32 
GeneralI like this PinmemberVuyiswa Maseko13-Feb-09 2:13 
GeneralWow! Great article. PinmemberFarrru2-Jan-09 4:15 
GeneralRe: Wow! Great article. PinmemberNazmul Hoda15-Jan-09 0:51 
GeneralMy vote of 1 Pinmemberkamii4731-Dec-08 22:28 
GeneralRe: My vote of 1 PinmemberVuyiswa Maseko13-Feb-09 2:05 
GeneralMy vote of 1 Pinmembermvbon31-Dec-08 9:33 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 10 Apr 2009
Article Copyright 2008 by Najmul Hoda
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid