zoukankan      html  css  js  c++  java
  • Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)

    近期使用ng重构公司的后台管理系统,类似modal这样的组件,再也不用像以前那样先创建再append(而是由状态驱动);为图方便使用bootstrap的样式和angular-ui的bootstrap组件,然而它的弹出层默认样式是水平居中,垂直方向上并没有;F12之,找到bootstrap.min.css(这里是3.3.5)的相应代码,主要修改以下三个地方,修改后的样子:

    第一处(将0改为-50%,相对自身偏移一半):

    .modal.in .modal-dialog{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}

    第二处(原先是relative):

    .modal-dialog{position:absolute;width:auto;margin:10px auto;left:0;right:0;top:50%}

     第三处:

    @media (min-768px){.modal-dialog{width:600px}

     此时modal已经可以垂直居中了:

  • 相关阅读:
    webpack常见问题 收藏
    ES6 模块
    ES6 Class 类
    ES6 迭代器
    ES6 函数
    ES6 数组
    ES6 对象
    记一次pda(安卓)环境配置流程
    类型转换
    DOM事件
  • 原文地址:https://www.cnblogs.com/AidenChen/p/5617463.html
Copyright © 2011-2022 走看看