OpenClose ShowHide Ajax Modalpopupextender using JavaScript in asp.net

ASP.NET Leave a comment

Hey guys, I will explain the very nice topic which is OpenClose ShowHide Ajax Modalpopupextender using JavaScript in asp.net, which is very help full to show custom messages in your programming.

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

Related Posts:

Leave a Reply