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>