Question

我从javascript：

触发以下模式对话框

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

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

当我设置backdrop: true时，对话框会在外部点击时关闭，但整个屏幕会显示一个灰色的叠加层。

如何使用不会更改opacity叠加层的模态弹出窗口，但在外部点击时仍会关闭？

Answer 1

您可以background-color添加.modal-backdrop ......

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

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

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

Plunker link - 演示

Answer 2

您可以将backdrop：false设置为false，并将自己的点击事件添加到页面中：

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

Answer 3

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

http://jsfiddle.net/obewgqc8/

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

3 个答案: