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

reference