我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。

有人可以分享jQuery代码来做到这一点吗?


当前回答

大雄的答案适用于单一情况,但我在一个旧网站上有20-30个情态动词,正在寻找一个答案,为每个用bootstrap打开的情态动词设置这个。

您可以针对模式的事件名称空间,并为每个引导模式添加默认设置。

你可能不想对每个模式都这样做,但如果你这样做了,就没有必要静态地指定每个模式调用。

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
    var href = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
    var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data(), {backdrop: 'static', keyboard: false})

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
})

在我的例子中,我在选项结构中添加了{background: 'static', keyboard: false}。

其他回答

我发现最好的是把这个代码添加到链接中

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

大雄的答案适用于单一情况,但我在一个旧网站上有20-30个情态动词,正在寻找一个答案,为每个用bootstrap打开的情态动词设置这个。

您可以针对模式的事件名称空间,并为每个引导模式添加默认设置。

你可能不想对每个模式都这样做,但如果你这样做了,就没有必要静态地指定每个模式调用。

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
    var href = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
    var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data(), {backdrop: 'static', keyboard: false})

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
})

在我的例子中,我在选项结构中添加了{background: 'static', keyboard: false}。

试试主线:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">

我相信您想要将背景值设置为静态。如果您想避免在使用Esc键时关闭窗口,则必须设置另一个值。

例子:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

如果你使用JavaScript:

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

好吧,这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)

我的问题是类似的,模态框关闭时,我有里面的iframe正在加载,所以我必须禁用模态解散,直到iframe完成加载,然后重新启用。

这里提出的解决方案并不是100%有效。

我的解决办法是:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

所以我暂时阻止模态关闭:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

但是随着变量is_loading将重新启用关闭后Iframe加载。