源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-05-25 06:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Bootstrap模态框水平垂直居中与增加拖拽功能
最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来。现在分享给大家: 原文地址:[url=http://www.panshy.com/articles/201509/webdev-2524.html]http://www.panshy.com/articles/201509/webdev-2524.html[/url] [b]以下为Bootstrap模态框拖拽功能的增加方法[/b]
$("#myModal").draggable({ 
handle: ".modal-header", 
cursor: 'move', 
refreshPositions: false 
}); 
handle: ".modal-header", 去除将可以整个模态框都可以拖动,其中modal-header代表拖动的DIV的CLASS或ID [b]以下为弹出Bootstrap模态框水平垂直居中的代码[/b]
/* 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); 代表用户改变浏览器时的事件,可以不用,但是改变浏览器,模态框不会跟着变化。 [b]以上的JS代码加到页面的最后即可[/b] 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> 
[img]http://files.jb51.net/file_images/article/201611/2016110914334814.png[/img] 以上所述是小编给大家介绍的Bootstrap模态框水平垂直居中与增加拖拽功能,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部