最近開發乙個cms系統使用上了bootstrap，在開發乙個新增某些選項時，打算彈出乙個模態框，但是發現，模態框不會垂直居中到螢幕上，而是在螢幕上方，找了好多資料都沒搞定，最終自己試出了一種js的方法，同時還需要bootstrap模態框可以拖動，但是發現預設的也不行，翻遍了網路找了出來。現在分享給大家：
以下為bootstrap模態框拖拽功能的增加方法
複製內容到剪貼簿
$("#mymodal").draggable();
handle: ".modal-header", 去除將可以整個模態框都可以拖動，其中modal-header代表拖動的div的class或id
以下為彈出bootstrap模態框水平垂直居中的**
複製內容到剪貼簿
/* center modal */
function centermodals() );
}
$('#mymodal').on('show.bs.modal', centermodals);
$(window).on('resize', centermodals);
其中，$(window).on('resize', centermodals); 代表使用者改變瀏覽器時的事件，可以不用，但是改變瀏覽器，模態框不會跟著變化。
以上的js**加到頁面的最後即可
bootstrap模態框html
複製內容到剪貼簿
<
divclass="modal fade"
id="mymodal"
tabindex="-1"
role="dialog"
aria-labelledby="mymodallabel"
aria-hidden="true"
>
<
divclass="modal-dialog"
>
<
divclass="modal-content"
>
<
divclass="modal-header"
>
<
button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>×
button
>
<
h4class="modal-title"
id="mymodallabel"
>標題
h4>
div>
<
divstyle="padding:5px;"
>
<
divclass="modal-body"
data-scrollbar="true"
data-height="200"
data-scrollcolor="#000"
>
模態框內容
div>
div>
<
divclass="modal-footer"
>
<
button
type="button"
class="btn btn-default"
data-dismiss="modal"
>關閉
Bootstrap模態框Modal外掛程式
前提是要引入bootstrap.min.js modal 是覆蓋在父窗體上的子窗體。通常，目的是顯示來自乙個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊 互動等。1.先定義乙個按鈕 data toggle 以什麼事件觸發，如modal,popover,tooltips等 d...
Bootstrap模態框簡單使用
專案中遇到，記錄一下。引入bootstrap的js和css就可以，官網有就不寫了 html modal fade id my modal tabindex 1 role dialog aria labelledby mymodallabel1 aria hidden true modal dialo...
Bootstrap模態框使用詳解
一.模態框的正常點選出現，如新增功能 新增 二.還有一種就是編輯，此時在彈出模態框時，裡面要寫入資料，所以要先取得資料再彈出模態框。這時要加入js 控制 1.jsp頁面 修改2.js 修改使用者 將使用者資訊寫入模態框 function updatesystemuser else dialog.mo...