打开和关闭模态时的灰色背景

Question

我正在使用模态引导程序，并使用按钮的单击事件关闭此模态：之前我只使用此命令：并且这正常工作

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

但现在我不得不用它来完成同样的任务，为什么会发生这个更新？ 它对 css 或 html 有什么影响吗？

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

现在有另一个问题，当我尝试使用第二个功能关闭后第二次打开模型时，模型没有出现，只留下覆盖当前主体的灰屏。 我该如何解决这个问题？

<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">



            </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>

Answer 1

考虑到你的代码，我看不出有什么问题，这里是一个代码片段。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/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>

Answer 2

发生错误是因为您在 css 中使用了一些导致此问题的位置属性。 解决这个问题的一个简单方法是改变打开模态的方法，而不是用目标打开然后用jquery函数打开

<!--
<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; 
    });