bootstrap弹出框居中
2024-06-02 07:17:48
1.html页面（如果效果出不来，注意修改单引号）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>bootstrap</title><link href="css/bootstrap.css" rel="stylesheet"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]-->
</head><body><button type="button" id="modalBtn" class="btn btn-primary">点击弹modal</button><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">Modal 标题</h4></div><div class="modal-body"><p>内容…</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">确定</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script><script>var $m_btn = $('#modalBtn');var $modal = $('#myModal');$m_btn.on('click', function(){$modal.modal({backdrop:'static'});});/*(function () {var s = document.createElement("script");s.onload = function () {bootlint.showLintReportForCurrentDocument([]);};s.src = "js/bootlint.js";document.body.appendChild(s)})();*/
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>bootstrap</title><link href="css/bootstrap.css" rel="stylesheet"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]-->
</head><body><button type="button" id="modalBtn" class="btn btn-primary">点击弹modal</button><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">Modal 标题</h4></div><div class="modal-body"><p>内容…</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">确定</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script><script>var $m_btn = $('#modalBtn');var $modal = $('#myModal');$m_btn.on('click', function(){$modal.modal({backdrop:'static'});});/*(function () {var s = document.createElement("script");s.onload = function () {bootlint.showLintReportForCurrentDocument([]);};s.src = "js/bootlint.js";document.body.appendChild(s)})();*/
</script>
</body>
</html>2.修改bootstrap.js 源码
打开bootstrap.js ctrl+f 找到 modal对应代码
Modal.prototype.adjustDialog = function () {var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeightthis.$element.css({paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ‘‘,paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ‘‘})// 添加下面三行代码，注意修改单引号！var $modal_dialog = $(this.$element[0]).find(‘.modal-dialog‘);var m_top = ( $(document).height() - $modal_dialog.height() )/2;$modal_dialog.css({‘margin‘: m_top + ‘px auto‘});}这个样子就实现modal垂直居中了！
转载于:https://www.cnblogs.com/liliyasuolong/p/5105521.html
bootstrap弹出框居中相关推荐
- 学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式 注意事项 弹出方向 失去焦点隐藏 禁用元素弹出提示框 data属性详解 js方法与事件 方法: 事件: 注意事项 popover提示框组件依赖 ...
- 第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- Bootstrap 弹出框
一.Bootstrap 弹出框 弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容. 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 ...
- Bootstrap 弹出框（Popover）插件
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstr ...
- bootstrap弹出框如何实现点击出弹出框后，再点击任意地方隐藏弹出框
最近做个项目是用bootstrap搭建的网站,因为其自带弹出框很好使,便直接拿过来用了. 不废话直接进入正题 共分两步 1. 首先设弹出框方式为自动 popover(function(){trigge ...
- Bootstrap弹出框（Popover）插件动态加载数据
效果 鼠标点击输入框弹出提示内容,内容是根据输入的字符动态加载的,效果如图: HTML <input type="text" class="form-control ...
- BootStrap弹出框实现自动关闭（延时）
需求 最近使用bootstrap时,需要一个弹窗提示用户登录失败.bootstrap提供了alert组件来满足弹窗提示的功能,但是没有自动关闭功能,只提供了一个可以通过点击' x '号关闭的弹窗.详情 ...
- 一个 bootstrap 弹出框插件
http://bootstrap.ourjs.com/ 转载于:https://www.cnblogs.com/MDK-L/p/4428247.html
- Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
最新文章
- 【Android 逆向】修改运行中的 Android 进程的内存数据 ( 使用 IDA 分析要修改的内存特征 | 根据内存特征搜索修改点 | 修改进程内存 )
- ROS Gazebo（一）：安装与使用
- dfs解决选或不选问题
- extjs学习（关于grid）
- 【机器学习】SVM基本线性可分与多分类
- Python拾遗1：collections、itertools和内存io
- 计算机无法计算,计算器不能执行计算功能，运算结果始终为0
- 符号实体(转义字符)
- 实体类里的内部类怎么单独赋值_java你还在用各种setter赋值初始对象吗？用设计模式化简为易...
- redis专题：redis的常用数据结构及使用场景
- QQ解除外链限制，支持直接跳转淘宝抖音
- List、Set、Map比较
- 游戏开发 cocosBuilder cocosCreator cocosPods
- Kettle Spoon 安装配置详解
- 【嵌入式】牧马人G3 电子竞技鼠标拆解分析
- 手把手教做无人驾驶算法（二十六）--基于终端约束的MPC 控制
- bp神经网络的训练过程,一文搞定bp神经网络
- 【转载】完全二叉树的高度为什么是对lgN向下取整
- excel复选框_在Excel公式中使用复选框结果
- 爱你穿越时间，两行来至秋末的眼泪