bootstrap多层模态窗

<head>

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

    <title></title>

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

    <script src="Scripts/jquery-2.1.1.min.js"></script>

    <script src="bootstrap/js/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多层模态框modal嵌套问题
一.问题在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...
bootstrap添加模态窗后，再弹出消息提示框后，原先的滚动条消失
设置需要滚动的模态框 overflow :scroll
解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题
最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是W ...
angular+bootstrap+MVC 之二，模态窗
本例实现一个bootstrap的模态窗 1.HTML代码 <!doctype html>  <html ng-app=" ...
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
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 分页功能
function bootstrappage() { var options = { currentPage: currentPage, totalPages: totalPages, size: ' ...
VS调试错误：“没有可用于当前位置的源代码”的解决方案
今天,有朋友在问为什么我在调试的时候会出现"没有可用于当前位置的源代码"的错误呢? MSDN上的说法:没有可用于当前位置的源代码,项目不包含您试图查看代码的源代码.原因通常是双击了 ...
Codeforces Round #327 div2
Problem_A(591A): 题意: 有一段长度为l的路,两个人分别在两个端点,1, l. 现在已知每个人的速度为p,q. 求第一个人(初始位置在1)在他们第二次相遇的时候的位置. 当他们相遇的时 ...
1091-Black Vienna
描述 This problem is based on the game of Black Vienna. In this version there are three players and 18 ...
POJ2299+逆序数
归并排序!!!!!!!!!! /* 归并排序+求逆序数 */ #include<stdio.h> #include<string.h> #include<algorith ...
C#中的WebBrowser控件加载ActiveX插件
C#中WebBrowser控件,将项目输入更改为x86输出,在页面打开时即可自动加载ActiveX控件
关于checkbox的checked属性和change事件
jquery中的attr和prop有什么区别? To retrieve and change DOM properties such as the checked, selected, or disa ...
prim（与边无关，适合稠密的图，o(n^2)）---还是畅通工程
题目1017:还是畅通工程时间限制:1 秒内存限制:32 兆特殊判题:否提交:1653 解决:838 题目描述: 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“ ...
poj2079
根据凸包的单峰性质,穷举第一个顶点然后先更新第三个顶点,再更新第二个顶点 ..] of longint; ans,n,t,k,i,j:longint; function cross(i,j,k:lon ...
Bat 中特殊符号
批处理.Bat 中特殊符号的实际作用,Windows 批处理中特殊符号的作用: @\\隐藏命令的回显. ~\\在for中表示使用增强的变量扩展:在set中表示使用扩展环境变量指定位置的字符串:在set ...

bootstrap多层模态窗

bootstrap多层模态窗的更多相关文章

随机推荐

热门专题