How to close Modal Bootstrap only when entering the server-side method?

Question

I have a sign-up screen in a modal bootstrap, but when validating, if an error occurs or the user no longer fill in any field, the modal closes.

<script>
 function enviar1() {

            if (document.getElementById('<% =PES_NM.ClientID %>').value == "") {
                //alert("Campo Nome é obrigatório!");
                document.getElementById('msg').innerHTML = "Campo Nome é obrigatório!";
                document.getElementById('<% =PES_NM.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_END.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Endereço é obrigatório!";
                //alert("Campo Endereço é obrigatório!");
                document.getElementById('<% =PES_END.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_NUM_END.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Número é obrigatório!";
                //alert("Campo Número é obrigatório!");
                document.getElementById('<% =PES_NUM_END.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_CID.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Cidade é obrigatório!";
                //alert("Campo Cidade é obrigatório!");
                document.getElementById('<% =PES_CID.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_BAI.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Bairro é obrigatório!";
                //alert("Campo Bairro é obrigatório!");
                document.getElementById('<% =PES_BAI.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_CEP.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo CEP é obrigatório!";
                //alert("Campo CEP é obrigatório!");
                document.getElementById('<% =PES_CEP.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_EMAIL.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo E-Mail é obrigatório!";
                //alert("Campo E-Mail é obrigatório!");
                document.getElementById('<% =PES_EMAIL.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =docTomador.ClientID %>').value.length == 14) {
                if (document.getElementById('<% =PES_INSCM.ClientID %>').value == "") {
                    document.getElementById('msg').innerHTML = "Campo Inscrição Municipal é obrigatório!";
                   // alert("Campo E-Mail é obrigatório!");
                    document.getElementById('<% =PES_INSCM.ClientID %>').focus();
                    return false;
                }
            }

        }


    </script>



   <div id="myModal" class="modal fade"  data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <%--     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>--%>
                    <h4 class="modal-title" align="center">Cadastro de Pessoa</h4>
                </div>
                <div class="modal-body">
                    <div id="msg" aling="center"></div>
                    <table align="center" class="table table-overflow" width="100%" border="0">
                        <tr>
                            <td class="tblNormal" align="right">Documento:</td>

                            <td  align="left">
                                <asp:TextBox ID="PES_DOCID" runat="server" Width="150px" ReadOnly></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Nome:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_NM" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">CEP:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_CEP" runat="server" Width="100px" MaxLength="8"></asp:TextBox>
                                &nbsp;&nbsp;&nbsp;<font class="tblNormal">Numero:</font>&nbsp;&nbsp;&nbsp;
                                            <asp:TextBox ID="PES_NUM_END" runat="server" Width="40px" MaxLength="6"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Endereço:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_END" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>

                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Cidade:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_CID" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Bairro:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_BAI" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>

                        <tr>
                            <td class="tblNormal" align="right">E-mail:</td>
                            <td align="left">

                                <asp:TextBox ID="PES_EMAIL" runat="server" Width="300px"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal">
                                <div id="inscM1" align="right">Inscrição Municipal:</div>
                            </td>
                            <td align="left">
                                <div id="inscM2">
                                    <asp:TextBox ID="PES_INSCM" runat="server" Width="300px" MaxLength="45"></asp:TextBox>
                                </div>
                            </td>
                        </tr>

                    </table>
                </div>
                <div class="modal-footer" align="center">
                    <asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                        UseSubmitBehavior="false" data-dismiss="modal" OnClick="btnSaveImage_Click" />
                </div>
            </div>
        </div>
    </div>

Answer 1

I didn’t quite understand your doubt, but I saw that you put to close the modal when clicking save. This is not correct, because every time you save, the modal will be closed.

You must change that:

<asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                    UseSubmitBehavior="false" data-dismiss="modal" OnClick="btnSaveImage_Click" />

For that reason:

<asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                    UseSubmitBehavior="false" OnClick="btnSaveImage_Click" />

And if you need to close the modal, just create a new button with the close only function. For example:

<asp:Button runat="server" ID="btnCloseModal" Text="Close" class="btn btn-danger" data-dismiss="modal" />

And if you want to close the modal if an error occurs, just put this code above the 'Return false' in your Javascript.

$('#myModal').modal('hide');

It will close the modal if an error occurs.