脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap模态框

Bootstrap模态框(modal)垂直居中的实例代码

 更新时间：2016年08月18日 14:33:31   作者：ZEKELOVE  
这篇文章主要介绍了Bootstrap模态框(modal)垂直居中的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下

Bootstrap官网下载：http://v3.bootcss.com/

　　今天就在使用Bootstrap框架中遇到的一个问题分享一下，在产品开发的过程中使用了大量的弹出窗口（modal）。

　　刚开始学习使用的过程中就发现此窗口不能垂直居中，总是偏上，并且不能拖动，看了一下使用说明也没有提供过多的属性设置和方法，就这样使用默认的方式一直用着。最近，客户却提出了一个要求：能不能让弹出窗口居中，因为一些小的窗口偏上总感觉整体页面失衡，大一点的还过得去。

　　因为之前对Bootstrap也不是很熟悉，便开始baidu、google，发现只有很少的解决方案，如下：

$("#myModal").modal().css({
"margin-top": function () {
return - ($(this).height() / 2);
}
});

　　参考地址：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">&times;</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)垂直居中的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Js切换功能的简单方法

    Js切换功能的简单方法

    很久以前还在学校的时候，在网上看到有的关于js切换的效果我自己会用 很笨拙的方法试着写出来
    2010-11-11
  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对HTML进行反转义详解

    下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 微信小程序配置视图层数据绑定相关示例

    微信小程序配置视图层数据绑定相关示例

    这篇文章主要为大家介绍了微信小程序配置视图层数据绑定相关示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪<BR>
    2022-04-04
  • 获取offsetTop和offsetLeft值的js代码(兼容)

    获取offsetTop和offsetLeft值的js代码(兼容)

    offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的，为了实现值的准确获取，本文采用js代码实现下，有需求的朋友可以参考下哈
    2013-04-04
  • javascript dom 基本操作小结

    javascript dom 基本操作小结

    在网上找了很多dom操作的例子，感觉不全而且凌乱。
    2010-04-04
  • CocosCreator ScrollView优化系列之分帧加载

    CocosCreator ScrollView优化系列之分帧加载

    这篇文章主要介绍了CocosCreator ScrollView的优化，从分帧加载进行了讲解，对性能优化感兴趣的同学，一定要看一下
    2021-04-04
  • 原生js实现放大镜组件

    原生js实现放大镜组件

    这篇文章主要为大家详细介绍了js实现放大镜组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript禁止复制与粘贴的实现代码

    JavaScript禁止复制与粘贴的实现代码

    下面小编就为大家带来一篇JavaScript禁止复制与粘贴的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-05
  • JS变量及其作用域

    JS变量及其作用域

    本文主要介绍了JS变量及其作用域的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • 从零开始用electron手撸一个截屏工具的示例代码

    从零开始用electron手撸一个截屏工具的示例代码

    这篇文章主要介绍了从零开始用electron手撸一个截屏工具的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论