OpenClose ShowHide Ajax Modalpopupextender using JavaScript in asp.net sample code is as bellow:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ModelPopUp.aspx.vb" Inherits="ModelPopUp" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> //Function to Hide ModalPopUp function Hidepopup() { $find('ModalPopupExtender1').hide(); } //Function to Show ModalPopUp function Showpopup() { $find('ModalPopupExtender1').show(); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnShowPopup" runat="server" Style="display: none" /> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup" CancelControlID="btnHide" BackgroundCssClass="modalBackground"> </asp:ModalPopupExtender> <a href="javascript:void(0)" id="btnShow" onclick="Showpopup()">Show PopUp</a> <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" Style="display: none; border: 10px solid groove;"> <div> <a href="javascript:void(0)" id="btnHide" onclick="Hidepopup()">Hide PopUp</a> </div> </asp:Panel> </div> </form> </body> </html>
Download sample code: OpenClose ShowHide Ajax Modalpopupextender using JavaScript in asp.net
Good Example of Modalpopupextender