如何隐藏没有背景的模态弹出窗口？

Question

我正在从 javascript 触发以下模式对话框：

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

结果：对话框出现，但如果我在弹出窗口外单击，则不会关闭。

当我设置 backdrop: true 时，对话框在外部点击时关闭，但是全屏显示时带有暗淡的覆盖层。

我怎样才能有一个不改变 opacity 覆盖但仍然在外部点击时关闭的模态弹出窗口？

Answer 1

您可以留下backdrop:false，在页面中添加您自己的点击事件：

$('body').click(function(e){
   if ($('#myModal').is(e.target))
       $('#myModal').modal('hide') //or whatever your bootstrap uses to hide a modal
})

Answer 2

您可以将 background-color 添加到 .modal-backdrop 这样...

<style>
    .modal-backdrop {
        background-color: transparent;
    }
</style>

<!-- [...] -->

<script>
    // [...]
    $('#myModal').modal({
        show: true
    });
</script>

Plunker link - 演示

Answer 3

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

http://jsfiddle.net/obewgqc8/

如何隐藏没有背景的模态弹出窗口？

How to hide a modal popup without backdrop?

html

javascript

jquery

twitter-bootstrap

bootstrap-modal