I'm working with modal bootstrap, and use the click event of the button to close this modal: before I only used this mand: and this worked normally

$('#AddContact').click(function(){
    $("#ModalContact").modal('hide');    
});

but now I'm having to use this to acplish the same task, why did this update occur? is it any effect in css or html?

$('#AddContact').click(function(){
    $("#ModalContact").modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});

and now has another problem, when I try to open the model a second time after closing using the second function, the model does not appear, leaving only a gray screen overwriting the current body. How can I solve this?

<a  href="" data-toggle="modal"  data-target="#ModalContact"> Add Contact</a>

button event to open the modal

<!-- Modal Contato -->
<div class="modal fade " id="ModalContact" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                <h4 id="exampleModalLabel" class="modal-title">Contato</h4>

            </div>

            <div class="modal-body" id="CamposAddContato">



            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default  BotaoPadrao" data-dismiss="modal">Cancelar</button>
                <button type="button" id="AddContact" class="btn btn-success  BotaoPadrao">Salvar</button>
            </div>

        </div>
    </div>
</div>

I'm working with modal bootstrap, and use the click event of the button to close this modal: before I only used this mand: and this worked normally

$('#AddContact').click(function(){
    $("#ModalContact").modal('hide');    
});

but now I'm having to use this to acplish the same task, why did this update occur? is it any effect in css or html?

$('#AddContact').click(function(){
    $("#ModalContact").modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});

and now has another problem, when I try to open the model a second time after closing using the second function, the model does not appear, leaving only a gray screen overwriting the current body. How can I solve this?

<a  href="" data-toggle="modal"  data-target="#ModalContact"> Add Contact</a>

button event to open the modal

<!-- Modal Contato -->
<div class="modal fade " id="ModalContact" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                <h4 id="exampleModalLabel" class="modal-title">Contato</h4>

            </div>

            <div class="modal-body" id="CamposAddContato">



            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default  BotaoPadrao" data-dismiss="modal">Cancelar</button>
                <button type="button" id="AddContact" class="btn btn-success  BotaoPadrao">Salvar</button>
            </div>

        </div>
    </div>
</div>

• javascript
• jquery
• html
• css
• twitter-bootstrap

• I think this line $('.modal-backdrop').remove(); is removing your modal, Can you provide your HTML code related to the modal? – Yulio Aleman Jimenez Commented Jan 30, 2018 at 20:40
• Why not just put data-dismiss="modal" on #AddContact? – npearson Commented Jan 30, 2018 at 21:20

2 Answers 2

Taking into account your code, I don't see what is the problem, here is a code snippet.

  $('#AddContact').click(function(){

    $("#ModalContact").modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();  

  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a  href="" data-toggle="modal"  data-target="#ModalContact"> Add Contact</a>


<!-- Modal Contato -->
<div class="modal fade " id="ModalContact" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                <h4 id="exampleModalLabel" class="modal-title">
                  Contato
                </h4>

            </div>

            <div class="modal-body" id="CamposAddContato">
              <p>Lorem ipsum dolor sit amet ....</p>
            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default  BotaoPadrao" data-dismiss="modal">Cancelar</button>
                <button type="button" id="AddContact" class="btn btn-success  BotaoPadrao">Salvar</button>
            </div>

        </div>
    </div>
</div>

The error occurs because you are using some position property in css which causes this problem. an easy method to solve this is to change the method of opening the modal, rather than open with the target is then opened with a jquery function

<!--
<a  href="" data-toggle="modal"  data-target="#ModalContato"> Adicionar Contato</a>-->
<a id="AbrirModalContato" href="" > Adicionar Contato</a>


    $('#AbrirModalContato').click(function(){
        $('#ModalContato').appendTo("body").modal('show');
        return false; 
    });