How to hide AJAX modal automatically ?

Question

User-886220824 posted

I have an ajax modal in page. I want it to disappear after e.g. 3 seconds without refreshing or post back on page. I tried TIMER but the postsback and looks weird. 

Any clean way to hide MODAL after few seconds.

<asp:ModalPopupExtender ID="mdlMessageBox" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField1"
PopupControlID="pnlMessageBox">
</asp:ModalPopupExtender>

Answer 1

User2103319870 posted

I have an ajax modal in page. I want it to disappear after e.g. 3 seconds without refreshing or post back on page.

You can try with the below approach

<script type="text/javascript">
            function ShowModalPopup() {
                //Get the Modalpopupextender based on BehaviorID and use show method to display modal popup
                $find("modalPopupExtender1").show();
                //Call the function to close the Popup
                setTimeout(HideModalPopup, 3000);
                return false;
            }

            function HideModalPopup() {
                //Get the Modalpopupextender based on BehaviorID and use hide method to close modal popup
                $find("modalPopupExtender1").hide();
                return false;
            }
        </script>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="modalPopupExtender1" RepositionMode="RepositionOnWindowResizeAndScroll"
            TargetControlID="btnDummy" PopupControlID="PnlModal" BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
        <asp:Button ID="btnDummy" runat="server" Text="OpenPopup" Style="display: none" /><br />
        <%--Button to open the popup--%>
        <asp:Button ID="btnOpenPopup" runat="server" Text="OpenPopup" OnClientClick="return ShowModalPopup();" /><br />
        <%--The below panel will display as your confirm window--%>
        <asp:Panel ID="PnlModal" runat="server" Width="500px" CssClass="modalPopup">
            First Modal Popup
        </asp:Panel>

Answer 2

User-886220824 posted

Sir I am SHOWING it from asp.net code. But just want to hide it from javascript not display

Answer 3

User61956409 posted

Hi StackUnderflow,

I am SHOWING it from asp.net code. But just want to hide it from javascript not display

The following code works fine on my side, please refer to it.

<script>
    function myfunction() {
        setTimeout(function () {
            $find("mymodal").hide();
        }, 3000);
    }
</script>

<asp:Panel ID="Panel1" runat="server">
    Content
</asp:Panel>

<asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mymodal" runat="server" TargetControlID="btnopen" PopupControlID="Panel1"></asp:ModalPopupExtender>

ModalPopupExtender1.Show();

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hidemodal", "myfunction()", true);

Best Regards,

Fei Han

Answer 4

User2103319870 posted

Sir I am SHOWING it from asp.net code. But just want to hide it from javascript not display

You can try with the below code

 protected void Button1_Click(object sender, EventArgs e)
        {
            //Show the Modal Popup
            mdlMessageBox.Show();
            //Add a three seconds delay
            System.Threading.Thread.Sleep(3000);
            //Hide the modal popup
            mdlMessageBox.Hide();

        }