Open-Close or Show-Hide Ajax Modalpopupextender using JavaScript in asp.net

ASP.NET, Tutorials One comment

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

One comment

Leave a Reply