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

网友投稿 300 2023-06-30


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

最近开发一个cms系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种js的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来。现在分享给大家:

以下为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

模态框内容

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序 网络API Websocket详解
下一篇:微信小程序 loading 详解及实例代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~