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

Question

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

Answer 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

Answer 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')

参考