1，Bootstrap 模态框插件Bootbox垂直居中样式：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap </title>
  8.     <!--[if lt IE 9]>
  9.     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
  10.     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  11.     <![endif]-->
  12.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  13.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  14.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  15.     <script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.js"></script>
  16.  
  17.     <style>
  18.         /* 模态框居中样式 */
  19.         .bootbox-container {
  20.             position: fixed;
  21.             top: 0;
  22.             right: 0;
  23.             bottom: 0;
  24.             left: 0;
  25.             z-index: 1049;
  26.             overflow-y: auto;
  27.         }
  28.  
  29.         .bootbox-container:empty {
  30.             position: static;
  31.         }
  32.  
  33.         .modal {
  34.             display: table;
  35.             width: 600px;
  36.             height: 100%;
  37.             margin: 0 auto;
  38.         }
  39.  
  40.         .modal-dialog {
  41.             display: table-cell;
  42.             vertical-align: middle;
  43.         }
  44.         /* //模态框居中样式 */
  45.     </style>
  46.     <script>
  47.         $(function () {
  48.             /*设置bootbox*/
  49.             bootbox.setLocale("zh_CN");
  50.             bootbox.setDefaults({container: '.bootbox-container'});
  51.  
  52.             /*使用bootbox*/
  53.             bootbox.dialog({message: '<img src="https://www.cnblogs.com/images/logo_small.gif"/>'}).width(155);
  54.         });
  55.     </script>
  56. </head>
  57. <body>
  58.  
  59. <h1>Hello, world!</h1>
  60.  
  61. <!--bootbox容器-->
  62. <div class="bootbox-container"></div>
  63. </body>
  64. </html>

2，Bootstrap模态框Modal垂直居中样式：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>Bootstrap </title>
  9.     <!--[if lt IE 9]>
  10.     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
  11.     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  12.     <![endif]-->
  13.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  14.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  15.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  16.     <script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.js"></script>
  17.  
  18.     <style>
  19.         /* 模态框居中样式 */
  20.         .modal {
  21.             display: table;
  22.             width: 600px;
  23.             height: 100%;
  24.             margin: 0 auto;
  25.         }
  26.  
  27.         .modal-dialog {
  28.             display: table-cell;
  29.             vertical-align: middle;
  30.         }
  31.  
  32.         /* //模态框居中样式 */
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.  
  38.     <h2>创建模态框（Modal）</h2>
  39.     <!-- 按钮触发模态框 -->
  40.     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
  41.     <!-- 模态框（Modal） -->
  42.     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  43.         <div class="modal-dialog">
  44.             <div class="modal-content">
  45.                 <div class="modal-header">
  46.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  47.                     <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
  48.                 </div>
  49.                 <div class="modal-body">
  50.                     <p>在这里添加一些文本</p>
  51.                     <p>在这里添加一些文本</p>
  52.                     <p>在这里添加一些文本</p>
  53.                 </div>
  54.                 <div class="modal-footer">
  55.                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  56.                     <button type="button" class="btn btn-primary">提交更改</button>
  57.                 </div>
  58.             </div>
  59.             <!-- /.modal-content -->
  60.         </div>
  61.         <!-- /.modal -->
  62.     </div>
  63.  
  64. </body>
  65.  
  66. </html>

BootstrapBootbox居中的更多相关文章

  1. 关于textview显示特殊符号居中的问题

    话说这是2017年的第一篇博客,也是一篇技术博客.先从简单的一篇解决问题开始吧,千里之行,始于足下! ------------------------------------------------- ...

  2. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  3. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  4. 浏览器的兼容模式下的button中文字垂直方向不居中显示

    <button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. ...

  5. 如何只用CSS做到完全居中

    我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中--直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式, ...

  6. CSS常见居中讨论

    先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .con ...

  7. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

  8. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  9. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

随机推荐

  1. linux下基于rsync + find命令实现文件同步机制

    rsync和find是linux系统自带的命令,如果没有安装可以找到系统安装盘或者ISO文件,里面有rpm包,安装一下就可以了.       具体思路如下:             1)可以实现定时进 ...

  2. Material Design学习-----TextInputLayout

    TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...

  3. VUE2.0实现购物车和地址选配功能学习第一节（来源--慕课网河畔一角）

    第一节  vue知识 vue-resource:和后台交互的一个插件,实现get.post和jsonp等功能.(替代jQuery) vue特点: 1.易用:通过创建vue实例,{{}}绑定数据十分方便 ...

  4. Nginx支持Socket转发过程详解

    序言 一网友在群中问,nginx支持socket转发吗? 实话说,我没做过socket转发,但是我知道socket跟http一样都是通过tcp或者udp通信的,我猜测啦一下nginx应该支持吧,然后又 ...

  5. SpringMvc的运行流程

    一.先用文字描述 1.用户发送请求到DispatchServlet 2.DispatchServlet根据请求路径查询具体的Handler 3.HandlerMapping返回一个HandlerExc ...

  6. VMware下ubuntu与Windows实现文件共享的方法

    最近安装caffe需要将Windows下文件拷贝到ubuntu16.04下,就进行了共享文件夹的设置,期间遇到一些困难,记录下来,方便以后遇到此类问题不再困惑. (记录只为更好的分享) 言归正传: 1 ...

  7. 用GDB调试程序

    转自:http://blog.csdn.net/haoel/article/details/2879 是一篇从基础讲gdb的博文 用GDB调试程序 GDB概述---- GDB是GNU开源组织发布的一个 ...

  8. MATLAB（5）——生成归一化直方图

    作者:桂. 时间:2017-03-10  22:13:36 链接:http://www.cnblogs.com/xingshansi/p/6533579.html 声明:欢迎转载,不过记得注明出处哦~ ...

  9. ACM 整数划分（四）

    整数划分(四) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近 ...

  10. ajax详细讲解和封装包括HTTP状态码

    AJAX(异步的JavaScript和XML,用异步的形式去操作xml) 主要的作用:数据交互   好处:               1.节省用户的操作时间               2.提高用户 ...