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

随机推荐

十大经典排序算法总结——JavaScrip版
首先,对于评述算法优劣术语的说明: 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:即排序后2个相等键值的顺序和排序之前它们的顺序相同不稳定:如果a原本在b的前面,而a=b,排序之后a ...
saltstack安装配置（halite）
saltstack官方提供了一个简单的web UI--halite.但是给出的安装配置方法实在没法实现,在网上找了几篇博客,见文章末尾的参考链接,可以用起来了.但是功能有点简单.这篇文章记录安装配置h ...
MVC UpdateModel的未能更新XXXXX的类型模型
关于MVC UpdateModel的未能更新XXXXX的类型模型的问题: 最近做MVC3的项目,相信很多人都碰到过这个问题,在此记录一下,异常:UpdateModel的未能更新XXXXX的类型模型 ...
国内优秀Android学习资源
技术博客应用开发博主博客备注任玉刚 CSDN博客深入Android应用开发,深度与广度兼顾郭霖 CSDN博客内容实用,行文流畅,高人气博主夏安明 CSDN博客张鸿洋 CSDN博 ...
【开源分享：入门到精通ASP.NET MVC+EF6+Bootstrap】从这里开始，一起搭框架（1）开篇介绍
框架简介这几年一直在做ASP.NET开发,几年前做项目都是老老实实一行行的写代码,后来发现那些高手基本都会有自己积累起来的代码库,现在称之为开发框架,基础代码不用再去堆,主要精力可以集中在业务逻辑实 ...
[已开源/文章教程]独立开发一个社交 APP 的源码/架构分享 (已上架)
0x00 背景真不是和被推荐了2天的博客园一位大神较真,从他那篇文章的索引式文章内容也学习到了很多东西,看评论区那么多对社交APP源码有兴趣的,正巧我上周把我的一个社交APP开源了,包括androi ...
利用manifest文件对程序目录下的dll进行分类
1 背景对于大部分的券商和机构投资者,只能通过有交易所交易系统接入资质的券商提供的柜台系统来进行现货交易.相对于期货市场,现货市场的柜台系统千差万别,接入协议有明文字符串.二进制数据和FIX协议等, ...
JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
android之读取联系人信息
联系人信息被存放在一个contacts2.db的数据库中主要的两张表读取联系人读取联系人需要知道联系人内容提供者的地址,以及对应的操作对象.一般情况下操作对象是的命名方式和表明是一致的. 布局文 ...
通过Ajax实现增删改查
项目链接:https://github.com/shuai7boy/Ajax_CRUD 简要截图:

bootstrap 双层模态框的实现

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

随机推荐

热门专题