使用 Twitter Bootstrap 模式，我可以在模式打开时锁定背景吗？答案

【问题标题】：Using Twitter Bootstrap modals, can I lock the background when a modal is open?使用 Twitter Bootstrap 模式，我可以在模式打开时锁定背景吗？
【发布时间】：2012-12-21 18:09:56
【问题描述】：

我想在打开模式时使背景不可滚动。设置data-backdrop="static" 只会使模态框在您单击其外部时不会关闭。

【问题讨论】：

标签： html twitter-bootstrap scroll modal-dialog

【解决方案1】：

您可以尝试将事件处理程序附加到模态框的显示和隐藏中。当显示模式时，您将页面主体的溢出设置为隐藏。当模态框被隐藏时，您可以使溢出可见。

$('#myModal').on('shown', function () {
  $("body").css("overflow", "hidden");
});

$('#myModal').on('hidden', function () {
  $("body").css("overflow", "visible");
});

文档：

https://developer.mozilla.org/en-US/docs/CSS/overflow

http://twitter.github.com/bootstrap/javascript.html#modals

【讨论】：

【解决方案2】：

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

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

// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log('HIDE:', _hide);

// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
    // locks the dialog so that it cannot be hidden
    lock: function() {
        // console.log('lock called');
        // console.log('OPTIONS',this.options);
        this.options.locked = true;
    }
    // unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static)
    ,unlock: function() {
        // console.log('unlock called');
        this.options.locked = false;
    }
    // override the original hide so that the original is only called if the modal is unlocked
    ,hide: function() {
        // console.log('hide called');
        if (this.options.locked) return;

        _hide.apply(this, arguments);
    }
});

$('#mymodal').modal()
$('#mymodal').modal('lock')

reference

【讨论】：