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">&times;</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>

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. GridControl 设置自带选中复选框及设置该列列头名称

    2.设置该列标题,设置事件CustomDrawColumnHeader 效果图:

  2. xcode8 更新cocoapods

    一.升级ruby环境,由于目前淘宝Ruby镜像升级有问题,所以使用了 http://rubygems-china.oss.aliyuncs.com 二.需要操作的步骤: 1.检查你的ruby源,终端输 ...

  3. BZOJ 1337: 最小圆覆盖1336: [Balkan2002]Alien最小圆覆盖（随机增量法）

    今天才知道有一种东西叫随机增量法就来学了= = 挺神奇的= = A.令ci为包括前i个点的最小圆，若第i+1个点无法被ci覆盖，则第i+1个点一定在ci+1上 B.令ci为包括前i个点的最小圆且p在边 ...

  4. c++STL排序算法注意事项

    关于算法中的比较函数 #include<iostream> #include<algorithm> using namespace std; int compare(doubl ...

  5. zabbix安装详解

    关于zabbix及相关服务软件版本: Linux:centos 6.6 nginx:1.9.15 MySQL:5.5.49 PHP:5.5.35 一.安装nginx: 安装依赖包: yum -y in ...

  6. spring mvc之@ModelAttribute注解

    1.@ModelAttribute注释void返回值的方法 @Controller public class HelloModelController { @ModelAttribute public ...

  7. 使用秘钥连接ssh

    ssh服务器搭建 通过秘钥登陆连接另外一台虚拟机 创建证书  ssh-keygen -t rsa 第一行密钥保存位置直接输入回车 确定默认创建位置为 /root/.ssh 公钥必须改名为  autho ...

  8. Linux ssh登录命令

    常用格式:ssh [-l login_name] [-p port] [user@]hostname举例不指定用户:ssh 192.168.0.11指定用户:ssh -l root 192.168.0 ...

  9. Laravel事件Event

    适用场景:记录文章浏览量 php artisan make:event 事件名 示例: php artisan make:event MyEvent Laravel目录\app\Events已经生成M ...

  10. daterangepicker 时间插件

    在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="repo ...