In this article I will show you how you can use Ajax ControlToolkit ModalPopupExtender control in your asp.net application on asp.net
button click event.
Some of my previous articles are as follows:
Code
to Get Time Difference Between Two Times In C#, How
to Use and Install Ajaxcontroltoolkit in Asp.Net, Autocomplete
Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit, How
To Use FileUpload Control in Update Panel For Ajax File Upload In Asp.Net Using
C#, Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in
Asp.Net Using C#.Net, Accordion
Ajax Control Toolkit Example in Asp.net OR How to Use Ajax Accordion Control in
Asp.Net.
So for this article first we will create a new asp.net application
add the below add the below code in your page as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModulatPopupEctender.aspx.cs" Inherits="ProjectDemo_Asp.et.ModulatPopupEctender"
%>
<%@ 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>Example
of Ajax Control Toolkit ModalPopupExtender In Asp.Net</title>
<style type="text/css">
.modalpopupbackground
{
background-color:
#666699;
filter:
alpha(opacity=45);
opacity:
0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" text="Click To Open Popup" ID="Button1"/>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="divpopup"
TargetControlID="Button1"
CancelControlID="Button2"
BackgroundCssClass="modalpopupbackground">
</asp:ModalPopupExtender>
</div>
<asp:panel runat="server" id="divpopup" style="font-size:15;background-color:green;border:5 solid yellow;width:380px;height:150px;color:White;text-align:center;">
<h2> Example of Ajax Control Toolkit
ModalPopupExtender In Asp.Net</h2>
<div style="text-align:center;">
<asp:Button ID="Button2" runat="server" Text="Close" /></div>
</asp:panel>
</form>
</body>
</html>
|
Here is the propertied detail of a modular popup extender.
TargetControlID -
The ID of the control that activates the modal popup
PopupControlID -
The ID of the control to display as a modal popup
BackgroundCssClass
- The CSS class to apply to the background when the modal popup is displayed on
screen
DropShadow – Set True
to automatically add a drop-shadow to the modal popup
OkControlID - The
ID of the control that dismisses the modal popup
OnOkScript -
Script to run when the modal popup is dismissed with the OkControlID
CancelControlID -
The ID of the control that cancels the modal popup
OnCancelScript -
Script to run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID
- The ID of the embedded control that contains the popup header/title which
will be used as a drag handle
X - The X coordinates
of the top/left corner of the modal popup (the popup will be centered
horizontally if not specified)
Y - The Y coordinates
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.
DOWNLOAD
About the Author
0 comments:
Please let me know your view