Bootstrap 3模态在外部点击时不会关闭

时间:2014-05-21 12:21:37

标签: twitter-bootstrap

我使用call

创建了一个模态
 $('#myModalContent').modal('show');

html是:

<div class=" modal fade" id="myModalContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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>
            </div>
            <div class="modal-body">


            </div>

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

问题是当我在模态弹出窗口外单击时,它不会关闭。 (它在esc上关闭)

5 个答案:

答案 0 :(得分:8)

我已经编写了自定义代码来解决这个问题。

   $("body").on("click", ".modal-dialog", function(e) {
        if ($(e.target).hasClass('modal-dialog')) {
            var hidePopup = $(e.target.parentElement).attr('id');
            $('#' + hidePopup).modal('hide');
        }
    });

答案 1 :(得分:3)

只需将data-backdrop =“static”和data-keyboard =“false”属性添加到该模式即可。

答案 2 :(得分:1)

您可以将选项传递给模态:

$('#myModal').modal({
    show:true,
    backdrop:true,
    keyboard:true
})

答案 3 :(得分:0)

//remove modal class from modal start div and

$('#MyModal').modal({ backdrop: false });
$('body').removeClass("modal-open");

答案 4 :(得分:-1)

 It should work if you are using bootstrap 3 

<div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
            <h4 class="modal-title">Small Modal</h4>
        </div>
        <div class="modal-body">...</div>
    </div>
  </div>
</div>

并将其称为:$('#modalExample')。modal();