locked
ModalPopupExtender Hide issue RRS feed

  • Question

  • User-617859429 posted

    Hi

    1) I have a Modal Popup in Update panel.

    2) On Ok Button I am performing some operation (Post Back). I want my modal popup to be hidden once it ok button is clicked.

    currently it stays on page until operation is completed. some times operation is 1 minute long.

    Thank You

    Wednesday, January 2, 2019 5:00 PM

All replies

  • User-943250815 posted

    Perhaps you have to reconsider what you are doing.
    In your case looks fine, you made an AJAX call through Update Panel and as soon you get a result it does what should be done.

    One alternative, could be run your process in background, this way you get back as soon process is called.

    Wednesday, January 2, 2019 7:51 PM
  • User-893317190 posted

    Hi muhammadazeemazam,

    If you want a button that could post back to hide the modal popup, you could use a workaround.

    Put a button in your aspx and make it hidden and set the pop up's okcontrolid to the id of hidden button, then when the button posts back , trigger the hidden button's click event using jquery or js,the modal pop up should hide.

    Below is my code. Button3 is the hidden button. Button1 is the button that could post back.

    <script src="../Scripts/jquery-3.3.1.js"></script>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel runat="server" Width="300px" Height="200px" BackColor="YellowGreen" ID="panel">
    
                        <asp:Button ID="Button1" runat="server" Text="in update panel" OnClick="Button1_Click" />
                        <asp:Button ID="Button3" runat="server" Text="Button" style="display:none"/>
                        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                    </asp:Panel>
    
                    <asp:Button ID="Button2" runat="server" Text="show panel" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="Button3" TargetControlID="Button2" PopupControlID="panel" ></ajaxToolkit:ModalPopupExtender>
                </ContentTemplate>
                
            </asp:UpdatePanel>
    
            <asp:Label ID="Label1" runat="server" Text="other things"></asp:Label>
            <script>
                $(function () {
                    $("#Button1").click(function () {
                        $("#Button3").click();
                    })
                })
            </script>
        </form>

    Code behind. Change the label to show the button actually posts back.

      protected void Button1_Click(object sender, EventArgs e)
            {
     
                Label2.Text = "I have changed the content in post back";
            }

    The result.

    Best regards,

    Ackerly Xu

    Thursday, January 3, 2019 4:18 AM
  • User-1174608757 posted

    Hi Khaki

    According to your description,could you please tell me which Modal  popup you have used? Bootstrap popup window or Ajax toolkit popup window extender?

    I wish you could post detail about your code, so that we could help you solve your problem quickly.

    Best Regards 

    Wei Zhang

    Thursday, January 3, 2019 5:28 AM