zoukankan      html  css  js  c++  java
  • Bootstrap modal垂直居中

            在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看,代码如下:

    Js代码  收藏代码
    1. //在初始显示时设置垂直居中  
    2. $('#YourModal').modal().css({  
    3.     'margin-top'function () {  
    4.         return -($(this).height() / 2);  
    5.     }  
    6. });  
    7.   
    8. //或者我们可以将这个效果注册到显示事件中:  
    9. $('.modal').on('show'function() {  
    10.     $(this).css({  
    11.         'margin-top'function () {  
    12.             return -($(this).height() / 2);  
    13.         }  
    14.     });  
    15. });  

          今天正好遇到这个问题,不过我用的Bootstrap框架是Bootstrap3版本了,解决代码如下:  

    Js代码  收藏代码
    1. $('#YourModal').on('show.bs.modal'function (e) {  
    2.     $(this).find('.modal-dialog').css({  
    3.         'margin-top'function () {  
    4.             var modalHeight = $('#yourModal').find('.modal-dialog').height();  
    5.             return ($(window).height() / 2 - (modalHeight / 2));  
    6.         }  
    7.     });      
    8. });  
       




  • 相关阅读:
    容器
    最大公共子串
    HTTPS复习
    进程同步算法
    Android系统机制
    【springBoot】之快速构建一个web项目
    【springBoot】之概述
    【java】之深入理解JVM
    【java】之equals和==区别
    【AMQ】之JMS Mesage structure(JMS消息结构)
  • 原文地址:https://www.cnblogs.com/caryfang/p/4598353.html
Copyright © 2011-2022 走看看