如何在用户点击关闭图标时关闭Bootstrap模态框？

Question

我希望只有在用户点击关闭按钮时，才能关闭模态框。据我所见，我需要重写 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)

我是否走在正确的道路上？

- MID

Answer 1

您可以定义模态框的行为，定义 data-keyboard 和 data-backdrop。

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

- Tabares

Answer 2

当你启动模态框时，可以传递选项：

{
  keyboard: false,
  backdrop: 'static'
}

可以通过禁用点击背景和按下 ESC 键来关闭模态框。也可以将它们设置为 data- 属性。

- PerfectlyNormal

---

@Normal，谢谢你，我已经找到了。现在，当我调用另一个模态框（登录->忘记密码）时，我无法关闭先前的模态框，因为它是静态选项。当我删除静态属性并隐藏它时，淡出效果仍然存在。如果我创建jsfiddle，你能帮我吗？ - MID

我甚至无法在jsfiddle中从模态框中打开另一个模态框，请看这里 - http://jsfiddle.net/sfWBT/493/ - MID

这将切换模态，仅此而已。第二个模态没有背景，并且其位置很奇怪，但可以用作进一步调整的基础：http://jsfiddle.net/AWSc6/ - PerfectlyNormal

示例使用 data- 属性：<div class="modal fade" data-keyboard="false" data-backdrop="static"> - WOUNDEDStevenJones

Answer 3

试试这个

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

- Vikram

Answer 4

在Jquery中最好的方法是:

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

在HTML中的OR：

<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>

- Angel Fraga Parodi

---

你的第二个示例（针对已初始化的模态框）无法通过按下“Esc”键来关闭模态框。 - johnnyRose

这是真的，因此我写了这个：“但是，如果您已经初始化了模态框，则需要解除模态框的单击事件，例如像这样”。对我来说，它起作用 =D。 - Angel Fraga Parodi

@johnnyRose，如果有必要禁用按键事件，$('#modal-id').unbind('keyEventName') ; 应该可以帮到你。 - Angel Fraga Parodi

Answer 5

您可以定义模态框的行为，定义data-keyboard和data-backdrop。

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

此外，它还可以在ASPX页面中使用。

- Arjun Singh Bisht

Answer 6

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

- Tiago

Answer 7

在Bootstrap 5中，您可以添加属性来处理您的模态框：

<div class="modal id="staticBackdrop" 
     data-bs-backdrop="static" 
     data-bs-keyboard="false">
    < ... >
</div>

这是完整故事的文档链接： https://getbootstrap.com/docs/5.2/components/modal/#static-backdrop

- jacklin

Answer 8

您可以使用no-close-backdrop。

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

- Mateen Ray