最近开发一个CMS系统使用上了Bootstrap，在开发一个添加某些选项时，打算弹出一个模态框，但是发现，模态框不会垂直居中到屏幕上，而是在屏幕上方，找了好多资料都没搞定，最终自己试出了一种JS的方法，同时还需要Bootstrap模态框可以拖动，但是发现默认的也不行，翻遍了网络找了出来。现在分享给大家：
原文地址：http://www.panshy.com/articles/201509/webdev-2524.html
以下为Bootstrap模态框拖拽功能的增加方法
复制内容到剪贴板
- $("#myModal").draggable({ ??
-
????handle:?".modal-header",??
-
????cursor:?'move',??
-
????refreshPositions:?false??
- });??
?handle:?".modal-header",???去除将可以整个模态框都可以拖动，其中modal-header代表拖动的DIV的CLASS或ID
以下为弹出Bootstrap模态框水平垂直居中的代码
复制内容到剪贴板
- ??
-
function?centerModals()?{ ??
-
????$('#myModal').each(function(i)?{ ??
-
????????var?$clone?=?$(this).clone().css('display',?'block').appendTo('body');?var?top?=?Math.round(($clone.height()?-?$clone.find('.modal-content').height())?/?2); ??
- ????????top?=?top?>?0???top?:?0; ??
- ????????$clone.remove(); ??
-
????????$(this).find('.modal-content').css("margin-top",?top); ??
- ????}); ??
- } ??
-
$('#myModal').on('show.bs.modal',?centerModals); ??
-
$(window).on('resize',?centerModals);??
其中，$(window).on('resize',centerModals); 代表用户改变浏览器时的事件，可以不用，但是改变浏览器，模态框不会跟着变化。
以上的JS代码加到页面的最后即可
Bootstrap模态框HTML
复制内容到剪贴板
- ??
-
<div?class="modal?fade"?id="myModal"?tabindex="-1"?role="dialog"?aria-labelledby="myModalLabel"?aria-hidden="true">??
-
??<div?class="modal-dialog">??
-
????<div?class="modal-content">??
-
??????<div?class="modal-header">??
-
????????<button?type="button"?class="close"?data-dismiss="modal"?aria-hidden="true">×</button>??
-
????????<h4?class="modal-title"?id="myModalLabel">标题</h4>??
-
??????</div>??
-
??????<div?style="padding:5px;">??
-
??????<div?class="modal-body"?data-scrollbar="true"?data-height="200"?data-scrollcolor="#000">??
- ??模态框内容
-
</div>??
-
??????</div>??
-
??????<div?class="modal-footer">??
-
????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">关闭</button>??
-
??????</div>??
-
????</div>??
-
??</div>??
-
</div>??
