Modal popup window in ASP.NET using VB.NET

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.
  • 10673
Download Files:
 

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

                        &nbsp;

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

 

Masked1.JPG

Figure 1.

When I click on any Image then.

Masked2.JPG

Figure 2.
 

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.