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. .Net程序员学用Oracle系列(18)：PLSQL Developer 攻略

    1.功能说明及使用技巧 1.1.对象浏览器 1.2.SQL 窗口 1.3.测试窗口 1.4.命令窗口 1.5.图表窗口 1.6.报告窗口 1.7.右键菜单 1.8.快速登录技巧 1.9.其它 2.总结 ...

  2. STM32F4的FPU单元讲解

    搞STM32F407单片机的时候 看见的关于STM32F4系列的FPU 单元讲解 比较精彩的博客  于是特意转载 和大家分享 转自:http://blog.renren.com/blog/256814 ...

  3. Redis服务器搭建

    下载并解压redis,然后进入redis所在目录   编译安装             make && make install   启动redis 服务 (加上&表示在后台运 ...

  4. vue2.0全局组件之pdf

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火 ...

  5. MyBatis的类型自定义映射

    背景 利用MyBatis将数据库的时间类型映射成Java8的时间类型,引申对不同类型的自定义映射 实现方法 1.实现MyBatis中TypeHandler接口 @MappedTypes(value = ...

  6. smarty模板做人员表信息删除，修改 里面的性别单选按钮民族下拉，另外登录进去可以显示姓名

    首先登录进去可以显示姓名 smarty模板做人员表信息删除,删除的时候有提示框确定删除吗. 修改 里面的性别单选按钮,要修改谁有默认选中,用了变量调节器 民族位置做下拉,用<{foreach}& ...

  7. java基础：修改数组对应下标的数据

  8. 第二期培训（PING问题定位指导）心得

    一.什么是 PING DOS 命令,一般用于检测网络通与不通 ,也叫时延,其值越大,速度越慢 PING (Packet Internet Grope),因特网包探索器,用于测试网络连接量的程序.Pin ...

  9. html5常用英语单词

    Aabsolute 绝对active 激活的align 对齐alpha 半透明度animation 卡通片绘制auto 自动aside 偏栏 Bbackground 背景bgcolor 背景颜色blo ...

  10. js面向对象总结

    原型链 新创建的xiaoming的原型链是: xiaoming ----> Student.prototype ----> Object.prototype ----> null 也 ...