1. 程式人生 > >Bootstrap禁止點選空白處關閉模態框以及模態框的拖動

Bootstrap禁止點選空白處關閉模態框以及模態框的拖動

Bootstrap禁止點選空白處關閉模態框

在專案中如果用到Bootstrap的話,自然離不開模態框,但是模態框會預設的點選空白處就會把模態框關閉,我們可能在實際應用中會禁止這種行為

$('#myModal').modal({backdrop: 'static', keyboard: false});
//backdrop:static時,空白處不關閉.
//keyboard:false時,esc鍵盤不關閉.

或者

在HTML頁面中編寫模態框時,在div初始化時新增屬性 aria-hidden=truedata-backdrop=”static”,即可。

Bootstrap模態框預設不可拖動,如果螢幕不適配模態框大小,容易造成使用者使用不方便的問題。

$(document).on("show.bs.modal", ".modal", function(){
    $(this).draggable();
    $(this).css("overflow-y", "scroll");   
    // 防止出現滾動條,出現的話,你會把滾動條一起拖著走的
});