Bootstrap3模态框Modal垂直居中样式
1，Bootstrap 模态框插件Bootbox垂直居中样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap </title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.js"></script> <style>
/* 模态框居中样式 */
.bootbox-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1049;
overflow-y: auto;
} .bootbox-container:empty {
position: static;
} .modal {
display: table;
width: 600px;
height: 100%;
margin: 0 auto;
} .modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* //模态框居中样式 */
</style>
<script>
$(function () {
/*设置bootbox*/
bootbox.setLocale("zh_CN");
bootbox.setDefaults({container: '.bootbox-container'}); /*使用bootbox*/
bootbox.dialog({message: '<img src="https://www.cnblogs.com/images/logo_small.gif"/>'}).width(155);
});
</script>
</head>
<body> <h1>Hello, world!</h1> <!--bootbox容器-->
<div class="bootbox-container"></div>
</body>
</html>
2，Bootstrap模态框Modal垂直居中样式：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap </title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.js"></script> <style>
/* 模态框居中样式 */
.modal {
display: table;
width: 600px;
height: 100%;
margin: 0 auto;
} .modal-dialog {
display: table-cell;
vertical-align: middle;
} /* //模态框居中样式 */
</style>
</head> <body> <h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">
<p>在这里添加一些文本</p>
<p>在这里添加一些文本</p>
<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 -->
</div> </body> </html>
Bootstrap3模态框Modal垂直居中样式的更多相关文章
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Boostrap 模态框 水平垂直居中问题
var editorB = new UE.ui.Editor({ initialFrameHeight: 350, initialFrameWidth: 600 }); ...
- Bootstrap历练实例：模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 模态框 modal data-toggle data-target
模态框 modal data-toggle data-target 1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...
- Bootstrap弹出框(modal)垂直居中
最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...
- Bootstrap3 模态框 select2搜索框无法输入
<div class="modal fade" role="dialog" aria-hidden="true" data-backd ...
- 黄聪：bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
随机推荐
- 我安装android studio的过程与经历
虽然android studio已经出来两年多了,但是我一直都没真正用过.之前用Eclipse还算用得挺好.我并不是一个专职的android开发者,我是个游戏开发者,打包的时候要用到android.不 ...
- 添物零基础到大型全栈架构师 不花钱学计算机及编程（预备篇）— C语言编程基础
C语言介绍 C语言基本是每个编程人员必学的一面语言,很好掌握,是理解编程的关键.很多编程语言基于其编写或者基于此语言的衍生品编写. C语言是人机交互的一个基础语言之一,虽然是之一,单一般其实就是唯一 ...
- poj 2404 中国邮递员问题 欧拉回路判定+状压dp
/* 状压dp 邮递员问题:求经过任意点出发经过每一条边一次并回到原点. 解法:1.如果是欧拉回路那么就是所有的边的总和. 2.一般的解法,找出所有的奇度顶点,任意两个顶点匹配,即最小完美匹配,可用状 ...
- oracle中的类似BIN$MrkCYT9eTTK+0sStMwn7+Q==$0的表的作用
https://www.2cto.com/database/201211/166482.html https://docs.oracle.com/cd/E11882_01/server.112/e40 ...
- - > 动规讲解基础讲解四——矩阵取数
给定一个m行n列的矩阵,矩阵每个元素是一个正整数,你现在在左上角(第一行第一列),你需要走到右下角(第m行,第n列),每次只能朝右或者下走到相邻的位置,不能走出矩阵.走过的数的总和作为你的得分,求最大 ...
- MySQL出现：com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure Last packet sent to the server was 0 ms ago.
1.首先检查生产环境的机器是否ping的通和telnet的通数据库 2.排查数据库连接的参数 3.看数据量是否很大 参考: http://blog.csdn.net/sclxf/article/det ...
- 将list转为json字符串
//确保JSP和servlet的编码方式一致 resp.setContentType("text/html;charset=GBK"); List<String> jy ...
- Setting .xap MIME Type for Silverlight
http://www.adefwebserver.com/dotnetnukehelp/misc/Silverlight/SettingMimeType.html Windows 2003: In I ...
- 一份关于jvm内存调优及原理的学习笔记(转)
JVM 一.虚拟机的基本结构 1.jvm整体架构 类加载子系统:负责从文件系统或者网络中加载class信息,存入方法区中. 方法区(Perm):存放加载后的class信息,包括静态方法,jdk1.6以 ...
- 从零讲Java，给你一条清晰地学习道路！该学什么就学什么！
从零讲JAVA ,给你一条 清晰地学习道路!该学什么就学什么! 1.计算机基础: 1.1数据机构基础: 主要学习:1. ...