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

参照