Twitter Bootstrap / jQuery - 如何暂时阻止模态被关闭？ [英] Twitter Bootstrap / jQuery - How to temporarily prevent the modal from being closed?

问题描述

我正在使用Twitter Bootstrap模式，使用默认选项，您可以单击背景或按[Esc]关闭模式。

I am using Twitter Bootstrap modals, with the default options where you can click the backdrop or press [Esc] to close the modal.

但是，当我启动时模态中的ajax操作我想禁用模态以任何方式关闭。所以我禁用按钮并隐藏模态的关闭按钮，但我无法弄清楚如何禁用背景和[Esc]键。

However, when I initiate an ajax operation in the modal I want to disable the modal from being closed in any way. So I disable buttons and hide the modal's close button but I can't figure out how to disable the backdrop and the [Esc] key.

我试过：

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

但这似乎没有动态。

一旦ajax操作完成，我还需要重新启用背景和键盘。

I will also need to re-enable the backdrop and keyboard once the ajax operation is finished.

推荐答案

注意：此解决方案的目标是 twitter bootstrap 2.x ！有关根据bootstrap 3的差异，请参阅此答案（下方）。

Note: This solution is targeting twitter bootstrap 2.x! See this answer (just below) for differences according to bootstrap 3.

扩展引导模式功能，无需修改原始源。

Extending bootstrap modal functionality without modifying original source.

感谢@David和他在如何扩展Twitter Bootstrap插件我终于得到了它的工作。这是他的解决方案的略微修改版本，添加了模态锁定。我发布它作为一个额外的答案，因为我认为这可能是其他像我一样努力解决这个问题的人的起点。

Thanks to @David and his suggestion at How to Extend Twitter Bootstrap Plugin I finally got it to work. It is a slightly modified version of his solution with modal "lock" added. I post it as a additional answer since I think it may could be a starting point for others that like me have struggled hard with this issue.

// save the original function object
var _superModal = $.fn.modal;

// add locked as a new option
$.extend( _superModal.defaults, {
    locked: false
});

// create a new constructor
var Modal = function(element, options) {
    _superModal.Constructor.apply( this, arguments )
}

// extend prototype and add a super function
Modal.prototype = $.extend({}, _superModal.Constructor.prototype, {
    constructor: Modal

    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superModal.Constructor.prototype[args.shift()].apply(this, args)
    }

    , lock : function() {
        this.options.locked = true
    }

    , unlock : function() {
        this.options.locked = false
    }

    , hide: function() {
        if (this.options.locked) return
        this._super('hide')
    }
});

// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    // this is executed everytime element.modal() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('modal'),
            options = $.extend({}, _superModal.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('modal', (data = new Modal(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.modal);

使用这种技术改变bootstrap.js不应该是nessecary，同样的功能可以更容易在bootstrap项目之间共享。此方法应适用于所有其他引导程序插件。到目前为止只用按钮试过，但我不知道为什么它不应该。

With this technique it should not be nessecary to alter bootstrap.js, and the same functionality can more easily be shared among bootstrap projects. This method should be applicable to all the other bootstrap plugins. Have so far only tried with button though, but I cant se why it shouldnt.

查看工作小提琴 - > http：// jsfiddle.net/Sz7ZS/

see working fiddle -> http://jsfiddle.net/Sz7ZS/

这篇关于Twitter Bootstrap / jQuery - 如何暂时阻止模态被关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！