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.
Here in this article I am going to show this by using image. Here I used a datalist in which I am showing some image, when user click on any image then that image will open in a large new window by making visible and disable old window. When user close this new large window then old all image window become active.
This is the aspx code.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image :: Masked Div/Modal popup</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="JavaScript/Maskdiv.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="MaskedDiv" class="MaskedDiv">
</div>
<div id="ModalPopupDiv" class="ModalPopup">
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tr>
<td style="width: 98%; background-color: #D7EDF7; color: White; font-weight: bold;"
align="right" valign="top">
</td>
</tr>
<tr>
<td style="width: 98%; background-color: #D7EDF7; color: White; font-weight: bold;"
align="center" valign="middle">
<img id="imgMaskShow" runat="server" />
</td>
</tr>
<tr>
<td style="width: 98%; background-color: #D7EDF7; color: Black; font-weight: bold;"
align="right" valign="top">
<a href="javascript:void(0);" onclick="javascript:CloseModelPopup();" style="color: Black;">
Close</a>
</td>
</tr>
</table>
</div>
<div align="center">
<table cellpadding="2" cellspacing="2" class="style1" style="background-color: #D7EDF7"
width="100%" align="center">
<tr>
<td class="style2">
Masked Div / Modal Popup Window</td>
</tr>
<tr>
<td class="style3">
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 windows are commonly used in applications to control
user awareness and to display critical notices.
</td>
</tr>
<tr>
<td class="style2" colspan="6">
<asp:DataList ID="MaskedDataList" runat="server" RepeatColumns="4" Width="100%">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" height="150" width="150" align="center"
bgcolor="#F0F8E6">
<tr>
<td width="10" bgcolor="#F0F8E6">
</td>
<td valign="middle" bgcolor="white" height="150" width="150" align="center">
<a href="javascript:void(0);">
<img src='<%# getSRC(Container.DataItem) %>' id="ImgShow" runat="server" align="top"
style="border: solid 1px Gray;" height="150" width="170" title='<%# DataBinder.Eval(Container.DataItem, "Image")%>'
onclick="javascript:OpenModelPopup(this);">
</a>
</td>
<td width="10" bgcolor="#F0F8E6">
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Here on the laod event I am filling datalist through a XML file.
Imports System
Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Dim ds As New DataSet()
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
ds.ReadXml(Server.MapPath("DefaultPageImagesXMLFile.xml"))
MaskedDataList.DataSource = ds.Tables(0)
MaskedDataList.DataBind()
End Sub
Public Function getSRC(ByVal imgSRC As Object) As String
Dim dRView As DataRowView = DirectCast(imgSRC, DataRowView)
Return ResolveUrl(dRView("Image").ToString())
End Function
End Class
When I run the application.
Figure 1.
When I click on any Image then.
Figure 2.