Saturday, 26 October 2013

How to Build Modal Popup using ASP.Net AJAX ModalPopupExtender Control in ASP.NET

Hi friends, in this article I will explain about  How to Build Modal Popup using ASP.Net AJAX ModalPopupExtender Control in ASP.NET.

Write the below code in the ASP.NET page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to Build Modal Popup using ASP.Net AJAX ModalPopupExtender Control</title>  
<style type="text/css">
    .modalBackground
    {
        background-color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        vertical-align:top;
    }

</style>
</head>
<body>
   <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h4>Build Modal Popup using ASP.Net AJAX ModalPopupExtender Control</h4>
            <asp:Button ID="btnShow" runat="server" Style="display: block;" Text="Show"/>
            <ajax:ModalPopupExtender ID="ModalPopup" runat="server" TargetControlID="btnShow"
                BackgroundCssClass="modalBackground" PopupControlID="PnlShow">
            </ajax:ModalPopupExtender>
          
            <asp:Panel ID="PnlShow" runat="server" Style="display: none;width:450px;height:250px;background-color:White;">
             <span style="float: right; padding-right: 0px; margin: 0px;">
                         <asp:Button ID="btnClose" Text="X" runat ="server" />
             </span>
                <div style ="padding:100px 100px;color:Green;">
                 Aspdotnet-Kishore offers ASP.NET,VB.NET,C#,WCF,MVC,Web Services,JQuery,Javascript,MVC 4 Razor,interview Questions and Answers ,Code Examples and More....   
                </div>                           
            </asp:Panel>
</form>
</body>
</html>

The output of the above code as shown in the below figure.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.