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

How to hide a modal popup without backdrop?

本文关键字：模态 隐藏 窗口 情况下 背景      更新时间：2023-09-26

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

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

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

当我设置backdrop: true时，对话框在外部单击时关闭，但全屏显示并带有灰色的叠加层。

如何拥有一个不更改opacity叠加层但仍在外部单击时关闭的模式弹出窗口？

您可以像这样为.modal-backdrop添加background-color...

<style>
    .modal-backdrop {
        background-color: transparent;
    }
</style>
<!-- [...] -->
<script>
    // [...]
    $('#myModal').modal({
        show: true
    });
</script>

普伦克链接 - 演示

您可以保留 backdrop：false，并将您自己的点击事件添加到页面：

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

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

http://jsfiddle.net/obewgqc8/

相关文章：