bootstrap 双层模态框的实现

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="css/Lib/bootstrap.min.css" rel="stylesheet" />

    <script src="lib/Other/jquery-2.1.3.min.js"></script>

    <script src="lib/Other/bootstrap.min.js"></script>

    <style type="text/css">

        .modal-open,

        .modal-open .navbar-fixed-top,

        .modal-open .navbar-fixed-bottom {

            margin-right: 0;

        }

        .modal {

            bottom: auto;

            padding: 0;

            background-color: #ffffff;

            border: 1px solid #999999;

            border: 1px solid rgba(0, 0, 0, 0.2);

            border-radius: 6px;

            -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

            background-clip: padding-box;

            overflow-y: auto;

        }

        .modal.container {

                max-width: none;

            }

        #firstmodal {

            width: 98%;

            height: 98%;

        }

        #secondmodal {

            width: 99%;

            height: 99%;

        }

    </style>

    <script type="text/javascript">

        $(function() {

            $('#m1').on("click", function() {

                $('#firstmodal').modal();

            });

            $('#m2').on("click", function () {

                $('#secondmodal').modal();

            });

        });

    </script>

</head>

<body>

    <div class="content" style="margin-left: 100px;margin-top: 100px;">

        <button class="btn btn-primary btn-lg" id="m1">打开第一层模态窗口</button>

    </div>

    <div id="firstmodal" class="modal container fade" tabindex="-1" style="display: none;">

        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h4 class="modal-title">第一层模态窗口</h4>

        </div>

        <div class="modal-body">

            <p>

                <button class="btn btn-primary btn-lg" id="m2">打开第二层模态窗口</button>

                第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

            </p>

        </div>

        <div class="modal-footer" style="text-align: center;">

            <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>

        </div>

    </div>

    <div id="secondmodal" class="modal container fade" tabindex="-1" style="display: none;">

        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h4 class="modal-title">第二层模态窗口</h4>

        </div>

        <div class="modal-body">

            <p>

                第二层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

                主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

            </p>

        </div>

        <div class="modal-footer" style="text-align: center;">

            <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>

        </div>

    </div>

</body>

bootstrap 双层模态框的实现的更多相关文章

Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
Bootstrap 实例 - 模态框（Modal）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
bootstrap的模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
黄聪：bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
layui实现类似于bootstrap的模态框功能
以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...
WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

随机推荐

page-cache层
pagecache层内存管理如果使用page,尤其对于32位系统来说,kmap & kunmap,可以把做struct *page与虚拟地址的映射用kmap做一个临时的映射,然后通过kun ...
sqlserver 通用分页存储过程
来源:http://www.jb51.net/article/19936.htm CREATE PROCEDURE commonPagination ), --要显示的列名,用逗号隔开 ), --要查 ...
Codevs 1506 传话（floyd大法好）。
1506 传话时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解题目描述 Description 一个朋友网络,如果a认识b,那么如果a第 ...
设置apache https服务
配置http.conf,所在位置d:\wamp\bin\apache\apache2.4.9\conf\http.conf LoadModule socache_shmcb_module modu ...
grains
用途 1,匹配客户端 2,配置文件里使用 3,资产管理定义grains方法1: 方法2:
TinyFrame升级之十：WCF Rest Service注入IOC的心
由于在实际开发中,Silverlight需要调用WebService完成数据的获取,由于之前我们一直采用古老的ASMX方式,生成的代理类不仅难以维护,而且自身没有提供APM模式的调用方式,导致在Sin ...
Windows数据类型
WORD:16位无符号整形数据 DWORD:32字节无符号整型数据(DWORD32) DWORD64:64字节无符号整型数据 INT:32位有符号整型数据类型 INT_PTR:指向INT数据类型的指针 ...
用linqPad帮助你快速学习LINQ
在这里我向大家推荐的一个具是LinqPad有了这个工具并熟练使用就可以很快学习并掌握linq linqPad下载地址:http://www.linqpad.net/ 它也自带了很多例子方便大家查询,l ...
Google Zxing 二维码生成与解析
生成二维码的开源项目可谓是琳琅满目,SwetakeQRCode.BarCode4j.Zxing...... 前端有JQuery-qrcode,同样能实现生成二维码. 选择Zxing的原因可能是对 Go ...
Java：反射
初识Java反射机制: 从上面的描述可以看出Java的反射机制使得Java语言可以在运行时去认识在编译时并不了解的类/对象的信息,并且能够调用相应的方法或修改属性的值.Java反射机制的核心就是允许在 ...

bootstrap 双层模态框的实现

bootstrap 双层模态框的实现的更多相关文章

随机推荐

热门专题