Modal boostrap in UpdatePanel after dark background click event

Navigation
0

I have a modal boostrap poup within a ASPX UpdatePanel component within this modal I have a ASP btnEditar button with a click event to execute a update routine. After executing the event, the modal closes but its dark background stays on the page making it impossible to do anything!

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>

Aftertheeditbuttonevent:

Could anyone guide me in a possible solution to this event.

    
asked by anonymous 29.03.2018 / 20:00

1 answer

1

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

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

This is the div that makes the page background dark.

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

I think the best solution is to take the modal from UpdatePanel , or simply run this code after updating UpdatePanel : 

$("body").removeClass('modal-open').find('.modal-backdrop').remove();
    
29.03.2018 / 20:11
How to read the result of a JSON Array using Ionic 3? Edit group and real-time file