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>

Bootstrap3模态框Modal垂直居中样式的更多相关文章

  1. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  2. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  3. Boostrap 模态框 水平垂直居中问题

            var editorB = new UE.ui.Editor({ initialFrameHeight: 350, initialFrameWidth: 600 });         ...

  4. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  5. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  6. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  7. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  8. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  9. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

随机推荐

  1. JSON.parseObject将json字符串转换为bean类，是否大小写敏感区分---https://blog.csdn.net/mathlpz126/article/details/80684034

    JSON.parseObject将json字符串转换为bean类,是否大小写敏感区分 https://blog.csdn.net/mathlpz126/article/details/80684034

  2. linux命令与技巧

    1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i

  3. Linux下汇编语言学习笔记35 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  4. 16、Java并发性和多线程-死锁

    以下内容转自http://ifeve.com/deadlock/: 死锁是两个或更多线程阻塞着等待其它处于死锁状态的线程所持有的锁.死锁通常发生在多个线程同时但以不同的顺序请求同一组锁的时候. 例如, ...

  5. Spring注解配置定时任务<task:annotation-driven/>

    http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...

  6. 3.1－HDLC/PPP

    同步串行链路(Serail Point-to-Point Link)的封装 3.1-HDLC/PPP     高级数据链路控制HDLC(High-Level Data Link Control):   ...

  7. Intellij IDEA安装插件

    从Eclipse到Intellij IDEA换过来,还是没有适应,并且电脑异常的卡顿,4核4G内存的机器表示伤不起.Intellij IDEA还有待我进行调教. 今天说明一下怎样安装插件.以keyPr ...

  8. Android实现微博分享及其注意事项

    在前面我写了两篇关于QQ和微信的分享(http://blog.csdn.net/dawanganban/article/details/42015249)(http://blog.csdn.net/d ...

  9. 《Linux Device Drivers》第八章 分配内存——note

    本章主要介绍Linux内核的内存管理. kmalloc函数的内幕 不正确所获取的内存空间清零 分配的区域在物理内存中也是连续的 flags參数 <linux/slab.h> <lin ...

  10. (寻找第K小的数&amp;&amp;寻找第K小的数的和)

    这一篇博客以一些OJ上的题目为载体,讲一下寻找第K小的数的方法 方法一: 先将数据排列好,然后,然后return a[k]或者将前K个数加起来 方法二: 基于高速排序.如,一次高速排序将某一个数放到了 ...