Modal boostrap inside Updatepanel after event click dark background

Question

I have a modal boostrap Poup within a component ASPX UpdatePanel inside that modal I have a button ASP btnEditar with event click to perform a update. After executing the event the modal closes but its darkened background is on the page preventing any action!

Modal call:

<button type="button" class="btn btn-info btn-lg" 
data-toggle="modal" data-target="#modalEditar">
<i data-toggle="tooltip" title="Editar" class="fa fa-edit">
</i></button>

Modal:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="modal fade" data-backdrop="static" id="modalEditar" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Editar</h4>
                    </div>
                    <div class="modal-body">
                        <asp:HiddenField ID="hdfListID" runat="server" />
                        <asp:HiddenField ID="hdfCodAgenciaAlterar" runat="server" />

                        <table class="table table-condensed">
                            <tbody>
                                <tr>
                                    <td>
                                        <strong><i class="fa fa-map-marker margin-r-5">
                                                </i>Cidade da Agência</strong>
                                        <div class="col-xs-12">
                                            <asp:TextBox ID="txtCidadeEditar"
                                                autocomplete="off" CssClass="form-control" 
                                                placeholder="Ex: Itapira"
                                                runat="server" onkeypress="return somenteLetras(event);">
                                            </asp:TextBox>
                                        </div>
                                    </td>
                                    <td>
                                        <strong><i class="fa fa-university margin-r-5">
                                                </i>Código Agência</strong>

                                        <div class="col-xs-9">
                                            <asp:TextBox ID="txtCodAgenciaEditar" MaxLength="4"
                                                autocomplete="off" CssClass="form-control" 
                                                placeholder="Ex: 9999   => 4 dígitos"
                                                runat="server" onkeypress="return PermiteSomenteNumeros(event);" />
                                        </div>
                                    </td>
                                    <td class="info" style="text-align: center">
                                        <strong><i class="fa fa-info-circle text-light-blue margin-r-5"></i>
                                            <span class="text-light-blue">Essa ação editará</span></strong>
                                        <br />
                                        <strong><span class="text-light-blue margin-r-5">9 processos!</span></strong>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <div class="pull-left">
                            <asp:Button ID="btnEditar" OnClick="btnEditar_Click"
                                CssClass="btn btn-info" runat="server" Text="Editar"></asp:Button>
                        </div>
                        <div class="pull-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Fim -->

    </ContentTemplate>
</asp:UpdatePanel>

After the edit button event:

Could someone guide me into a possible solution for this event.

Answer 1

When you open the modal, the bootstrap creates a div with the following Markup, before closing the tag <body>:

<div class="modal-backdrop fade show"></div>

This is the div that makes the bottom of the page dark.

How did you put the modal inside the UpdatePanel, when this panel is updated, the html is updated and another modal is created. But the previous modal, which was linked to the created backdrop, no longer exists. There is no javascript event closing the modal in the correct way ($().modal('hide')).

I believe that the best solution is to remove the modal from the UpdatePanel, or simply run this code after updating UpdatePanel:

$("body").removeClass('modal-open').find('.modal-backdrop').remove();