资讯专栏INFORMATION COLUMN

修改bootstrap.js文件使模态框垂直居中显示

liaoyg8023 / 539人阅读

摘要:注意这里修改的版本为首先找到关于模态框的代码段,找到这里是方法在方法中合适的位置添加下面一段代码使模态框垂直居中显示重新打开页面会发现,模态框会出现在垂直居中的位置,并且不受滚动条的影响。

注意:这里修改的bootstrap版本为3.3.0

首先找到bootstrap.js关于模态框的代码段,找到

Modal.prototype.show=function (_relatedTarget) {

//这里是show方法
//...
//...

}

在show方法中合适的位置添加下面一段代码:

//使模态框垂直居中显示
var $dialog=that.$element.find("div.modal-dialog"),
   top=(document.documentElement.clientHeight-$dialog.height())/2;  
  $dialog.css({"margin":+top+"px auto"});
  

重新打开页面会发现,模态框会出现在垂直居中的位置,并且不受滚动条的影响。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79096.html

相关文章

  • 你不知道的CSS(二)

    摘要:用来控制表格单元格宽度你也许遇到过给表格设置了宽度,但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。显而易见的,默认情况下,单元格宽度受其内容约束。而设置了后,其单元格宽度变得可控了。 本文首发于我的博客在上文《你不知道的CSS(一)》中,介绍了兄弟选择器美化表单,font-size:0消除间隙,overflow清除浮动,border绘制三角形等7个实用技巧。由于文章长...

    sewerganger 评论0 收藏0
  • 前端实例练习 - 模态

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    xiaotianyi 评论0 收藏0
  • 前端实例练习 - 模态

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    CODING 评论0 收藏0
  • 前端实例练习 - 模态

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    caige 评论0 收藏0
  • Bootstrap使模态modal实现表单提交弹出

    摘要:模态框插件模态框是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能,那么您需要引用...

    wind3110991 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<