1. 程式人生 > >設定bootstrap modal模態框的寬度和寬度

設定bootstrap modal模態框的寬度和寬度

(1)修改寬度可以通過修改modal中的modal-dialog這個div寬度實現

<div class="modal-dialog" style="width:600px"> 

(2) 修改高度和寬度最好的辦法是修改modal-body中新增的控制元件,設定控制元件的大小,modal會自動適應。

例如

<div class="modal fade in" id="_modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
     style="display: block;
"
>
<div class="modal-dialog" role="document" style="width: 680px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </
button
>
<h4 class="modal-title" id="modalLabel">選擇移動到的目錄</h4></div> <div id="_modalDialog_body" class="modal-body"> <!-- 設定這個div的大小,超出部分顯示滾動條 --> <div id="selectTree" class="ztree" style="height:300px;overflow:auto; "> </
div
>
</div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">確定</button> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div> </div> </div>

顯示效果圖
在這裡插入圖片描述


Bootstrap模態框modal的高度和寬度設定

(1)高度

style=“height:900px”放在<div class = "modal-dialog">或者更外層上,整個模態框的高度不會發生變化 如下圖所示:
在這裡插入圖片描述

style=“height:900px”放在<div class = "modal-content">上,是將整個模態框(包括頭部、中間、末尾)設定為高度為900px;如下圖所示:
在這裡插入圖片描述

若將style=“height:900px放在<div class = "modal-header"><div class = "modal-body"><div class = "modal-footer">會引起對應部分高度變化如後面圖片:
在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述
(2)寬度

style=“width:900px”放在<div class = "modal-dialog">會引起整個模態框的寬度發生變化,且模態框如原先居中顯示,如下圖所示:
在這裡插入圖片描述

style=“width:900px”放在<div class = "modal-content">會引起整個模態框的寬度發生變化,且模態框如不居中顯示,感覺很怪,如下圖所示:
在這裡插入圖片描述

style=“width:900px”放在<div class = "modal-header"><div class = "modal-body"> <div class = "modal-footer">會引起整個模態框對應部位寬度發生變化,感覺很怪
在這裡插入圖片描述在這裡插入圖片描述
在這裡插入圖片描述