专栏首页前端之攻略bootstrap 模态框垂直居中实现方法 原

bootstrap 模态框垂直居中实现方法 原

 this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })
    //上面为原有bootstrap js里面的文件
     //下面为需要增加的js代码
    var $modal_dialog = $(this.$element[0]).find(".modal-dialog");
    var m_top = ( $(window).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({"margin": m_top + "px auto"}); 
    
    增加上面的代码模态框即可居中显示

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • this四种绑定方式之间的奇淫技巧

    写在前面 上一篇中,我们对于JavaScript中原始值、复杂值以及内存空间进行了一个深入浅出的总结,这次我们来聊一聊JavaScript中this关键字的深入...

    okaychen
  • 当我开始使用React 时,我希望我知道这些知识

    自2013年5月29日首次发布以来,React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。

    前端小智@大迁世界
  • 高级Js-Tab切换组件

    星辉
  • 【Flutter 专题】61 图解基本 Button 按钮小结 (一)

    Button 在日常中是必不可少的,和尚尝试过不同类型的 Button,也根据需求自定义过,今天和尚系统的学习一下最基本的 Button;

    阿策
  • js动态添加div

    因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收

    烟草的香味
  • ASP.NET AJAX(14)__UpdatePanel与服务器端脚本控件脚本控件的作用脚本控件的指责Extender模型脚本控件和Extender模型在PostBack中保持状态在UpdatePa

    脚本控件的作用 ASP.NET AJAX的脚本控件,连接了服务器端和客户端,因为我们(可以)只在服务器端编程,而效果产生在客户端,这就需要我们首先在服务器端编写...

    小白哥哥
  • Angular 2 + 折腾记 :(9) 初步了解指令,及动手一步一步写个自定义指令

    指令这种东西,可以加强用户体验,减少一些重复工作; 跟着我来实现一个悬浮链接打开的指令

    CRPER

扫码关注云+社区

领取腾讯云代金券