Modal Popup using Javascript

Post date: Nov 14, 2009 12:16:33 AM

Home

Modal Pop-up has become a very common solution for displaying certain information or are now a dayswidely used to show Login controls. The code below shows two ways to open modal popup. One by simply placing the code in aspx page and open modal pop-up using javascript. Secondly, by placing similar code in code-behind page and opening the modal. This way we can open modal popup from gridview or from repeater control dynamically from each row/column.

The codes is shown below:

<div id="light" class="white_content">

<div style="float:right;vertical-align:top;top:0;">

<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">

<img src="images/closepopup.png" />

</a>

</div>

<div>

<center><h3 style="border-bottom:solid 1px #0081C6">Referral Case</h3></center>

</div>

<div class="clear"></div>

<div class="customclass">

<div>

//The modal pop-up contents

//.net controls and buttons

//can also place login control

</div>

</div>

</div>

<div id="fade" class="black_overlay"></div>

Now add a hyperlink or button control which will open the modal popup

<asp:Button ID="Button" runat="server" Text="Login" OnClientClick="javascript:document.getElementById('light').style.display = 'block';document.getElementById('fade').style.display = 'block';" />

On clicking the login button a modal pop-up will open. This modal popup can be closed using the closepopup button or icon which appears on the top-right corner. The CSS used for displaying modal-popup is shown below

.black_overlay{

display: none;

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: #EFEFEF;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: fixed;

top: 25%;

left: 30%;

width: 380px;

height: 280px;

padding: 16px;

border: 16px solid #0081C6;

background-color: white;

z-index:1002;

overflow: auto;

}

.white_content customclass ul li

{

line-height:20px;

float:left;

}

You can also open modal popup from code behind by adding attributes to the button and the jacascript code in separate function within the head tag.