locked
How to hide AJAX modal automatically ? RRS feed

  • 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>



    Friday, January 8, 2016 10:26 PM

Answers

  • 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();
    
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2016 10:36 PM

All replies

  • 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>

    Friday, January 8, 2016 10:43 PM
  • User-886220824 posted

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

    Saturday, January 9, 2016 5:56 AM
  • 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




    Sunday, January 10, 2016 8:03 AM
  • 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();
    
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2016 10:36 PM