时间:2021-05-28
Bootstrap官网下载:http://v3.bootcss.com/
今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal)。
刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着。最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去。
因为之前对Bootstrap也不是很熟悉,便开始baidu、google,发现只有很少的解决方案,如下:
参考地址:http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看。
自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行。
最终只能研究一下源码了,发现可以在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中。
that.$element.children().eq(0).css("position", "absolute").css({"margin":"0px","top": function () {return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";},"left": function () {return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";}});页面代码如下:
<div><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- 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">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --></div>效果图如下:
以上所述是小编给大家介绍的Bootstrap模态框(modal)垂直居中的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下解决问题:BootStrap自带的模态框不垂直居中解决方案:调用Boo
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。实例下面的实例演示了事件的用法:Bootstrap实例-模态框(Modal)插件事件模态框(Moda
模态弹出框依赖于Bootstrap提供的js文件,可以单独引入modal.js,也可以直接引入bootstrap.js。模态弹出框的结构Bootstrap框架中
弹出模态框modal的实现方法及实例一个简单的点击列表修改按钮,弹出bootstrap模态框,修改状态传到后台php修改@endforeach×请修
一.结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的