Home > DeveloperSection > Beginner > Ajax Toolkit ModalPopupExtender Control in ASP.Net

Ajax Toolkit ModalPopupExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 13213  View(s)
Rate this:

Ajax Toolkit ModalPopupExtender Control in ASP.Net


The Modal Popup control in the AJAX Control Toolkit offers a simple way to create a modal popup at client-side.

Syntax:


<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">

</cc1:ModalPopupExtender>

ModalPopup Properties:


·TargetControlID - The ID of the element that activates the modal popup

·PopupControlID - The ID of the element to display as a modal popup

·OkControlID - The ID of the element that dismisses the modal popup

Code:

 <%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%--Use Modalpopup Extender here--%>

 

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="OkButton"TargetControlID="LinkButton1" BackgroundCssClass="Background" PopupControlID="Panel1">

</cc1:ModalPopupExtender>

 

<asp:Panel ID="Panel1" runat="server" CssClass="Popup" Style="displaynone" Width="668px">

<%--Add the table here --%>

</asp:Panel>

<asp:LinkButton ID="LinkButton1" runat="server">Show Job Id</asp:LinkButton>

Here StyleSheet is used to change the style of body and popup window.In Panel1 css class is usedCssClass="mPopup".

Add StyleSheet

bodydivph1h2h3h4ullitable

{

      margin:0;padding:0;border:none;

}

 

.Background {

      background-color:Lime ;

}

 

.Popup {

      background-color:Gray;border-width:3px;

      border-style:double;border-color:Gray;

      padding:4px;width:260px;

}

 

Description

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="OkButton"

TargetControlID="LinkButton1" BackgroundCssClass="Background" PopupControlID="Panel1">

</cc1:ModalPopupExtender>

 

 

Here TargetControlID is LinkButton1 when you click on this LinkButton then popup window will openPopupControlID is Panel1 when you click LinkButton then this panel will open as popup window.OkControlID is OkButton when you click this button then popup window will closed.

Run the project

AjaxControl Toolkit ModalPopupExtender Control in ASP.Net

When you click on LinkButton Show Job Id then a popup window will openAjaxControl Toolkit ModalPopupExtender Control in ASP.Net

When you click ok then popup will close. 

AjaxControl Toolkit ModalPopupExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick