Using Twitter Bootstrap modals, can I lock the background when a modal is open?

Question

I want to make the background unscrollable when a modal has been opened. Setting data-backdrop="static" only makes the modal not close when you click outside of it.

Answer 1

You can try attaching event handlers to the showing and hiding of your modal. When the modal is shown you set the overflow of the page's body to hidden. When the modal is hidden you make the overflow visible.

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

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

Documentation:

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

reference