脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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)垂直居中的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    这篇文章主要介绍了微信小程序api列表汇总包括网络API,媒体API,文件API ,数据API,位置API,界面API,微信小程序支付流程,微信小程序登录流程等,需要的朋友可以参考下
    2022-12-12
  • JavaScript前端开发时数值运算的小技巧

    JavaScript前端开发时数值运算的小技巧

    这篇文章主要介绍了JavaScript前端开发时数值运算的小技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JavaScript数组基于交换的排序示例【冒泡排序】

    JavaScript数组基于交换的排序示例【冒泡排序】

    这篇文章主要介绍了JavaScript数组基于交换的排序,结合实例形式分析了JavaScript排序算法中的冒泡排序简单实现技巧,需要的朋友可以参考下
    2018-07-07
  • js滚轮事件兼容性问题需要注意哪些

    js滚轮事件兼容性问题需要注意哪些

    这篇文章主要为大家详细介绍了js滚轮事件需要注意的兼容性问题,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript+Canvas实现简单的柱状图

    JavaScript+Canvas实现简单的柱状图

    这篇文章主要为大家详细介绍了JavaScript如何利用Canvas实现绘制简单的柱状图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • js实现时钟定时器

    js实现时钟定时器

    这篇文章主要为大家详细介绍了js实现时钟定时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 小程序实现展开/收起的效果示例

    小程序实现展开/收起的效果示例

    这篇文章主要介绍了小程序实现展开/收起的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JS 实现导航栏悬停效果(续)

    JS 实现导航栏悬停效果(续)

    上次导航栏悬停的那个页面在IE上运行的时候，会出导航栏不停的抖动问题，在本文已有完美的解决方法，将导航栏的定位方式由原来的absolute改为fixed即可
    2013-09-09
  • Map与WeakMap类型在JavaScript中的使用详解

    Map与WeakMap类型在JavaScript中的使用详解

    这篇文章主要介绍了Map与WeakMap类型在JavaScript中的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • JavaScript三大变量声明详析

    JavaScript三大变量声明详析

    这篇文章主要介绍了JavaScript三大变量声明详析,三大变量声明主要包括var、const和let，下面文章我们就围绕三者展开详细内容介绍，需要的朋友可以参考一下
    2022-06-06

最新评论