bootstrap 中關於模態框位置的自定義設定(在不改變原始碼的前提下)
阿新 • • 發佈:2018-11-22
用過bootstrap的童鞋們在使用模態框的時候一定見過這幾個class :modal fade modal-dialog modal-body ,至於這些class都有什麼作用,大家去bootstrap官網去查一下就知道了。
直接進入主題,本次對模態框位置自定義的本質其實就是對modal-dialog的style進行自定義,程式碼如下:
$('#menuhelp_display').on('shown.bs.modal', function () { //初始化模態框高度為 螢幕高度/2 var modalHeight=$(window).height() / 2; //將上面的高度設定到 modal-dialog中的margin-top屬性中 $(this).find('.modal-dialog').css({ 'margin-top': modalHeight }); });
說白了,就是通過設定modal-dialog 的 margin-top 來控制模態框的上下位置,然後舉一反三,控制左右位置你就懂了吧!