Bootstrap 如何关闭引导模式只有当用户点击关闭图像？

np8igboo 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(8)|浏览(155)

我只想在用户点击close btn时关闭modal。正如我所看到的，我需要覆盖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

来源：https://stackoverflow.com/questions/12669607/how-to-close-bootstrap-modal-only-when-user-clicks-on-close-image

8条答案

按热度按时间

ymzxtsji1#

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

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

赞(0）回复(0）举报 2022-12-16

3npbholx2#

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

{
  keyboard: false,
  backdrop: 'static'
}

这将禁止通过点击背景和退出按钮来关闭模态。或者可以将它们设置为data-属性。

赞(0）回复(0）举报 2022-12-16

rpppsulh3#

试试这个

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

赞(0）回复(0）举报 2022-12-16

vaj7vani4#

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

但是，如果你已经初始化了模态，你需要解除绑定模态的click事件，如下所示：

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

赞(0）回复(0）举报 2022-12-16

mu0hgdu05#

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

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

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

赞(0）回复(0）举报 2022-12-16

svdrlsy46#

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

赞(0）回复(0）举报 2022-12-16

kuuvgm7e7#

您可以使用无关闭背景

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

赞(0）回复(0）举报 2022-12-16

fsi0uk1n8#

在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

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 如何关闭引导模式只有当用户点击关闭图像？

8条答案

相关问题

热门标签

最新问答