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)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

随机推荐

ubuntu Apache 2命令
Task: Start Apache 2 Server /启动apache服务# /etc/init.d/apache2 startor$ sudo /etc/init.d/apache2 start ...
国内优秀Android学习资源
技术博客应用开发博主博客备注任玉刚 CSDN博客深入Android应用开发,深度与广度兼顾郭霖 CSDN博客内容实用,行文流畅,高人气博主夏安明 CSDN博客张鸿洋 CSDN博 ...
Fragment生命周期
Theano1.1-安装
之前一直想弄theano,可是python不是很懂,在学习了一段时间之后开始安装theano.当然官网上的安装资料是全,可是也太繁琐了.这里介绍的是最简单,最方面的安装theano的方法.官网首页:h ...
VS条件断点的一个坑
今天早上要调试一个方法,所以在方法的入口处也就是’{’打了一个条件断点,可是随后就发现对这个方法的调用都无法获得正确的结果了,不管传递什么参数,方法的返回值都一样,而且这个返回值与输入的参数完全无关, ...
对react的几点质疑
现在react.js如火如荼,非常火爆,昨天抽了一天来看了下这项技术.可能就看了一天,研究的不深入,但是我在看的过程中发现来了很多疑惑,这里拿出来和那家分享讨论以此共勉. 在我接触的前端以后,让我感觉 ...
Lucene.Net的服务器封装+APi组件 (开源）
为什么要封装真不知道用什么标题合适,我这几天在研究Lucene.Net,觉得把Lucene.Net封装为一个独立的服务器,再提供一个给客户端调用的Api组件应该是一件很意思的事,主要优势有以下: 1 ...
20160303 - 升级 Windows 10 版本 1511 后，文件夹默认打开方式为 cmd 的修复
问题描述:升级 Windows 10 版本 1511 (OS 内部版本 10586.122)后,文件夹的默认打开方式变成了cmd.双击任何一个文件夹,显示相关的提示错误信息如下: [Window Ti ...
关于iphone 6 ios8网站背景图片错乱的问题解决办法
最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...
ContentProvider详解
作用:把一个App中的数据库通过Url的形式共享出来,供其他App使用. 首先在App1中创建一个数据库,用SQLiteOpenHelper public class MyOpenHelper ext ...

bootstrap 双层模态框的实现

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

随机推荐

热门专题