Twitter Bootstrap/jQuery - 如何暂时防止模式被关闭?

问题描述

我正在使用 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
});

但这似乎不能即时工作.

But this doesn't seem to work on the fly.

ajax 操作完成后，我还需要重新启用背景和键盘.

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

推荐答案

注意:此解决方案针对twitter bootstrap 2.x！请参阅 this answer(就在下方)了解根据引导程序 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，并且可以更轻松地在 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/强>