当前位置: 首页 > news >正文

bootstrap模态框垂直居中

个人不太建议修改源码,所以,还是写了个方法来用:

function centerModals() {   
  $('#myModal').each(function(i) {   
    var $clone = $(this).clone().css('display','block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;   
    $clone.remove();   
    $(this).find('.modal-content').css("margin-top", top);   
  });   
};

用的时候:

$(function() {
  //页面大小变化是仍然保证模态框水平垂直居中
    $('#myModal').on('show.bs.modal', centerModals);
    $("#enter3-btn").on('click',function(){
      $('#myModal').modal({
        backdrop:'static',
        show:true
      });
    })
    //页面大小变化是仍然保证模态框水平垂直居中
    $(window).on('resize', centerModals);
      
});

 

转载于:https://www.cnblogs.com/wang715100018066/p/7884607.html

相关文章:

  • 如何让你的python爬虫“拟人化”, 突破60秒不被ban,绝地求生!
  • python(58):python下划线
  • HIVE,PV,UV分析
  • unity如何实现一个固定宽度的orthagraphic相机
  • 世界上最简单的无等待算法(getAndIncrement)
  • 项目Alpha冲刺Day1
  • RHEL6基础三十二之系统默认语言修改
  • [转]建行B2B支付回调参数乱码现象解析
  • 制作简易无限魔方
  • 【技巧篇】解决悬浮的header、footer遮挡内容的处理技巧
  • 聚集索引:三级阶梯SQL Server索引
  • es 5 数组reduce方法记忆
  • 用vlan划分实现全网互通,并隔离c1,c3和c2,c4
  • Nginx 目录配置详解
  • 详解最大似然估计(MLE)、最大后验概率估计(MAP),以及贝叶斯公式的理解...
  • [译]前端离线指南(上)
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 10个最佳ES6特性 ES7与ES8的特性
  • cookie和session
  • CSS魔法堂:Absolute Positioning就这个样
  • extract-text-webpack-plugin用法
  • Java IO学习笔记一
  • JavaWeb(学习笔记二)
  • MQ框架的比较
  • springMvc学习笔记(2)
  • webgl (原生)基础入门指南【一】
  • Yeoman_Bower_Grunt
  • 从输入URL到页面加载发生了什么
  • 后端_ThinkPHP5
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 判断客户端类型,Android,iOS,PC
  • 小程序开发之路(一)
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • Spring第一个helloWorld
  • (c语言)strcpy函数用法
  • (翻译)terry crowley: 写给程序员
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (接口自动化)Python3操作MySQL数据库
  • (十)c52学习之旅-定时器实验
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .NET CORE Aws S3 使用
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .NET的微型Web框架 Nancy
  • .php结尾的域名,【php】php正则截取url中域名后的内容
  • .stream().map与.stream().flatMap的使用
  • @html.ActionLink的几种参数格式
  • @Transactional 竟也能解决分布式事务?
  • [100天算法】-不同路径 III(day 73)
  • [2669]2-2 Time类的定义
  • [Android] Upload package to device fails #2720