仅当用户单击关闭图像时如何关闭引导模式？答案

【问题标题】：How to close Bootstrap modal only when user clicks on close image?仅当用户单击关闭图像时如何关闭引导模式？
【发布时间】：2012-09-22 02:03:24
【问题描述】：

我只想在用户单击关闭 btn 时关闭模式。正如我所见，我需要从 modal.js 覆盖这部分代码：

 hide: function (e) {
    e && e.preventDefault()

    var that = this

    e = $.Event('hide')//if I delete this line modal won't hide

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    $('body').removeClass('modal-open')

    escape.call(this)

    this.$element.removeClass('in')

    $.support.transition && this.$element.hasClass('fade') ?
      hideWithTransition.call(this) :
      hideModal.call(this)

我走对了吗？

【问题讨论】：

标签： twitter-bootstrap modal-dialog

【解决方案1】：

当你启动你的模式时，你可以传递选项：

{
  keyboard: false,
  backdrop: 'static'
}

这将禁用通过单击背景和退出按钮关闭模式。或者它们可以设置为data-attributes。

【讨论】：

@Normal，我已经找到了，谢谢。现在，由于静态选项以及当我删除静态属性并隐藏它时，我无法关闭以前的模式，当调用另一个模式（登录 - >忘记密码）时，淡入淡出效果仍然存在。如果我创建 jsfiddle 你能帮我吗？
我什至无法从 jsfiddle 中的 modal 打开 modal。请看这里-jsfiddle.net/sfWBT/493
这会切换模态，仅此而已。第二个模态没有背景，它在这里的位置很奇怪，但可以用作进一步调整的基础：jsfiddle.net/AWSc6
使用data- 属性的示例：<div class="modal fade" data-keyboard="false" data-backdrop="static">

【解决方案2】：

您可以定义模态行为，定义数据键盘和数据背景。

 <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

【讨论】：

【解决方案3】：

试试这个

<div id="myModal" class="modal hide fade in" data-backdrop="static">
<div> </div>
</div>

【讨论】：

【解决方案4】：

<script type="text/javascript">
    $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    })
</script>

【讨论】：

【解决方案5】：

在 Jquery 中实现它的最佳方法是：

<script type="text/javascript">
    $('#modal-id').modal({
        backdrop: 'static',
        keyboard: false
    });
</script>

HTML 中的或：

<div id="modal-id" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

但是，如果您已经初始化了模态框，则需要像这样取消绑定模态框的点击事件：

<script type="text/javascript">
    //this remove the close button on top if you need
    $('#modal-id').find('.close').remove();
    //this unbind the event click on the shadow zone
    $('#modal-id').unbind('click');
</script>

【讨论】：

您的第二个示例（对于已经初始化的模态）不处理通过按退出键来解除模态。
这是真的，出于这个原因，我写了这个：“但是，如果你已经初始化了模态，你需要像这样解开模态的点击事件”......对我来说它有效=D
@johnnyRose 如果有必要禁用键事件$('#modal-id').unbind('keyEventName') ; 应该可以帮助您

【解决方案6】：

您可以定义模态行为，定义数据键盘和数据背景。

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

此外，它也适用于 ASPX 页面。

【讨论】：

【解决方案7】：

你可以使用无关闭背景

<div id="modal" class="modal hide fade in" no-close-on-backdrop no-close-on-keyboard>

【讨论】：