locked
ASP.net Button and Bootstrap Modal Close issue RRS feed

  • Question

  • User1099429166 posted

    Dear All,

    I have a bootstrap modal in an UpdatePanel.  Below is my code

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>
                <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                    <div class="modal-dialog" role="document" style="width: 600px;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                            </div>
                            <div class="modal-body">
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                    <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                                </div>
    
                          <div class="modal-body">
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                    <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                                </div>
    
    
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                <asp:Button runat="server" ID="btnSave"  class="btn btn-success" Text="Save"  OnClick="btn_save_Click" ></asp:Button>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    
    <button class="btn btn-default btn-sm" type="button" onclick="ShowPopup()">Create User</button>
    
       protected void btn_save_Click(object sender, EventArgs e)
        {
            if (IsValid)
            {
    
                string strJsSuccess = new System.Text.StringBuilder("$('#editModal').modal('hide');").ToString();
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Hide", strJsSuccess, true);
            }
    
        }
    
    <script type="text/javascript">
    function ShowPopup() {
                $('#editModal').modal('show');
            }
        </script>

    The issue is that when i press btnSave button the modal closes but the the gray backdrop remains. btnSave has to be a server side button as I need to do some server side processing in btn_save_Click event.

    Any help would be greatly appreciated

    Wednesday, December 5, 2018 3:37 PM

All replies

  • User475983607 posted

    The save button is missing...

    data-dismiss="modal"

    See the working example in your previous post with the same subject.

    https://forums.asp.net/p/2150019/6240754.aspx?Re+Bootstrap+Modal+and+Validation

    Wednesday, December 5, 2018 5:13 PM
  • User-272414123 posted

    Use UpdatePanel inside Modal-content

    Friday, February 14, 2020 5:57 AM
  • User31164289 posted

    I've same problem but add 

    data-dismiss="modal"

    not work. Modal close without fire trigger onclick event in code behind.

    My modal is inside updatepanel.

    Other solution?

    Wednesday, April 1, 2020 5:08 PM
  • User-474980206 posted

    when the modal opens, the modal is moved to end of the body, so its no longer is in the update panel (that's why the suggestion to put the update panel in the modal). you need to change the save button, to close the dialog, move the dialog back to inside the update panel, then do the update panel submit. 

    its been years since I have had deal with webforms and update panels (and writing ajax controls), but there is a server clientscript helper to generate the client script to submit an update panel. Read the update panel docs about client scripting.

    Wednesday, April 1, 2020 7:37 PM