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

考虑到您的代码，我不知道问题所在，这是一个代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: