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

【问题标题】：How to hide a modal popup without backdrop?如何隐藏没有背景的模态弹出窗口？
【发布时间】：2016-02-22 16:55:43
【问题描述】：

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

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

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

当我设置backdrop: true 时，对话框在外部点击时关闭，但全屏显示为灰色覆盖。

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

【问题讨论】：

嘿，您找到解决方案了吗？我的建议是否能够引导您朝着正确的方向前进？希望如此:)

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

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

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

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

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

Plunker link - 演示

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

http://jsfiddle.net/obewgqc8/

【讨论】：