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.提高用户 ...