微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

BootStrap模态框不垂直居中如何解决

小云云
发布： 2018-05-21 11:24:25
原创
2340人浏览过

本文主要为大家详细介绍了bootstrap模态框不垂直居中的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

解决问题：BootStrap自带的模态框不垂直居中

解决方案：调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){});

在模态框显示之前我们用JS修改他的Top值，

具体代码如下：

/** 
 * 垂直居中模态框 
 **/ 
function centerModals() { 
  $('.modal').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 > 50 ? top : 0; 
    $clone.remove(); 
    $(this).find('.modal-content').css("margin-top", top - 50); 
  }); 
} 
// 在模态框出现的时候调用垂直居中方法 
$('.modal').on('show.bs.modal', centerModals); 
// 在窗口大小改变的时候调用垂直居中方法 
$(window).on('resize', centerModals);
登录后复制

相关推荐：

居然设计家
居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

居然设计家 64
查看详情 居然设计家

AJAX 和SpringMVC 实现bootstrap模态框的分页查询功能详解

bootstrap模态框嵌套、tabindex属性、去除阴影的方法

针对bootstrap模态框的技术讲解

以上就是BootStrap模态框不垂直居中如何解决的详细内容，更多请关注php中文网其它相关文章！

相关标签：
bootstrap ajax bootstrap JS function

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：安装vue-cli报错 4058 的解决方法实例分享 下一篇：JS实现点击循环切换显示内容
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
前端埋点与数据上报的JavaScript实现_js数据分析 前端埋点通过JavaScript在用户行为触发处采集数据，主要分为页面级、事件级、自动埋点和异常监控四类。手动埋点通过绑定事件调用统一上报函数，利用sendBeacon确保卸载前发送；自动埋点则监听全局事件，结合data-track属性实现低侵入采集；上报策略需采用批量发送、本地缓存、节流防抖等优化手段，保障性能与数据完整性，最终构建完整用户行为分析体系。
2025-11-09 20:15:03
429
Phaser 3 物理组中实现对象缓慢漂浮运动：禁用重力指南 本教程详细讲解如何在Phaser3游戏中，为物理组中的对象实现缓慢的漂浮运动，使其不受重力影响。通过使用setAllowGravity(false)方法或在物理组配置中设置allowGravity:false，开发者可以精确控制对象的运动轨迹，使其保持低速移动而不因重力而加速下落，从而创建独特的场景效果。
2025-11-09 20:09:19
813
优化数组循环：PHP/JavaScript中for循环的最佳实践 本文探讨在PHP和JavaScript中优化for循环遍历数组的最佳实践。我们将重点讨论如何通过缓存数组长度来提升性能，以及如何通过使用描述性变量名和明智选择直接访问或局部变量赋值来增强代码的可读性和可维护性，同时澄清现代语言中这两种访问方式的性能差异。
2025-11-09 20:05:00
920
JS音频视频怎么控制_JS HTML5音视频播放与JS控制方法 HTML5提供audio和video标签嵌入媒体，通过controls属性显示默认控件；2.JavaScript可调用play()、pause()、设置volume、currentTime等实现播放控制；3.监听play、pause、ended、timeupdate等事件实现交互响应；4.结合timeupdate和loadedmetadata事件更新进度条，通过change事件实现拖动跳转；最终可构建自定义播放器界面，但自动播放等功能需用户交互触发。
2025-11-09 19:59:02
473
Phaser.js 物理引擎中实现独立对象或群组的无重力缓慢漂移效果 本教程将指导您如何在Phaser.js物理引擎中，为特定的游戏对象或物理群组创建不受重力影响的缓慢漂移运动。通过利用setAllowGravity(false)方法或在物理群组配置中设置allowGravity:false属性，您可以精确控制对象的重力行为，使其在保持运动的同时，避免因重力而加速下落，从而实现独特的场景效果。
2025-11-09 19:55:00
660
js创建对象的5种方式 JavaScript中创建对象有5种常用方式：1.对象字面量适用于单个对象，语法简洁；2.newObject()显式构造，适合动态添加属性；3.构造函数可实例化多个相似对象；4.Object.create()实现原型继承；5.ES6类语法清晰，适合面向对象编程。
2025-11-09 19:47:29
406
JS插件开发怎样实现主题切换开关_JavaScript动态主题插件开发与实现方法 答案是实现主题切换功能需通过JavaScript动态控制样式资源。核心包括：1.设计类结构初始化插件，管理主题状态；2.用CSS变量或动态加载CSS实现切换；3.利用localStorage保存用户偏好；4.提供switchTo、getCurrentTheme等API便于调用，确保逻辑解耦与可维护性。
2025-11-09 19:45:02
447
JS函数如何定义立即调用函数_JS立即调用函数定义与执行时机 立即调用函数表达式（IIFE）是一种定义后立即执行的函数，用于创建独立作用域、避免全局污染。其基本形式为(function(){})()或(()=>{})()，通过括号将函数转为表达式以实现立即执行。IIFE可传参和返回值，常用于初始化操作或模块封装，如传入window对象或返回包含私有变量的对象。由于作用域隔离，内部变量不会影响外部环境，尽管ES6模块普及后使用减少，但在需要即时执行和闭包隔离的场景中仍具价值。
2025-11-09 19:43:09
810
Phaser.js中多物理组碰撞检测的高效管理与优化策略 本文旨在解决Phaser.js游戏中多物理组间碰撞检测配置冗余的问题。通过深入解析this.physics.add.collider方法的灵活用法，特别是其支持数组参数的特性，展示如何将多个单独的碰撞器声明优化为简洁高效的代码。这不仅能大幅提升代码的可读性和可维护性，也为未来扩展更多物理组提供了便捷的解决方案。
2025-11-09 19:41:00
937
JS注解怎么避免常见错误_ JS注解使用过程中常见错误与避免方法 注释应准确同步代码、避免冗余、不替代重构、禁用嵌套。更新注释需纳入开发流程，仅在必要时说明复杂逻辑，确保辅助理解而非误导。
2025-11-09 19:36:02
662
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部