In this article
I’m going to explain how to use Ajax Modalpopup Extender control in asp.net.
The
ModalPopup extender allows a page to display content to the user in a “modal”
manner which prevents the user from interacting with rest of the page. We can
add any web controls inside the modal content.
When
modal popup displayed only the modal content can be interacted with the user
and rest of the page does nothing.
ModalPopup
properties:
<ajaxToolkit:ModalPopupExtender ID="MPE"
runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
PopupDragHandleControlID="Panel3"
>
</ajaxToolkit:ModalPopupExtender>
PopupControlID - The ID of
the element to display as a modal popup
BackgroundCssClass - The CSS
class to apply to the background when the modal popup is displayed
DropShadow - True to
automatically add a drop-shadow to the modal popup
OkControlID - The ID of
the element that dismisses the modal popup
OnOkScript - Script to
run when the modal popup is dismissed with the OkControlID
CancelControlID - The ID of
the element that cancels the modal popup
OnCancelScript - Script to
run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID - The ID of
the embedded element that contains the popup header/title which will be used as
a drag handle
X - The X
coordinate of the top/left corner of the modal popup (the popup will be
centered horizontally if not specified)
Y - The Y
coordinate of the top/left corner of the modal popup (the popup will be
centered vertically if not specified)
RepositionMode - The setting
that determines if the popup needs to be repositioned when the window is resized
or scrolled.
Designer
Source Code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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></title>
<style type="text/css">
.modalBackground
{
position:
absolute;
z-index:
6000 !important;
top:
0px;
left:
0px;
background-color:
#000;
filter:
alpha(opacity=60);
-moz-opacity:
0.6;
opacity:
0.6;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShowPopup" runat="server" Text="Click me" />
<asp:Panel ID="pnlPopup" runat="server" BackColor="White">
<table width="350px" height="200px">
<tr>
<td align="center">
<b>Welcome
to Dotnetfox</b>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnCancel" runat="server" Text="Ok" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
DropShadow="true" BackgroundCssClass="modalBackground" Enabled="True" CancelControlID="btnCancel">
</asp:ModalPopupExtender>
</div>
</form>
</body>
</html>