Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个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模态框水平垂直居中的代码

/* center modal */ 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

<！-- Modal --> <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>

Bootstrap模态框水平垂直居中与增加拖拽功能.png
以上所述是小编给大家介绍的Bootstrap模态框水平垂直居中与增加拖拽功能,实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！