本篇实践一个多层模态窗口，而且是自适应的。

点击页面上的一个按钮，弹出第一层自适应模态窗口。

在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。

具体页面实现部分如下：

<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>





												


											
使用jQuery和Bootstrap实现多层、自适应模态窗口的更多相关文章
	

    
								
  1. 多个按钮触发同一个Bootstrap自适应模态窗口
		
    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...
    
		
    2. 
						
  2. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
		
    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
    
		
    3. 
						
  3. JBox - 模态窗口，工具提示和消息 jQuery 插件
		
    jBox 是一个强大而灵活的 jQuery 插件,可以帮助实现模态窗口,工具提示,通知和更多的功能.你可以使用 jQuery 选择器轻松地添加工具提示效果到元素上,您可以以同样的方式设置模态窗口.该库 ...
    
		
    4. 
						
  4. 使用jQuery创建模态窗口登陆效果
		
    日期:2013-8-22  来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...
    
		
    5. 
						
  5. Pop Easy – 轻松实现模态窗口的 jQuery 插件
		
    PopEasy 是一款轻量的 jQuery 插件,可以帮助开发人员容易的创建效果精美的模态窗口.PopEasy 在主流浏览器中都能够正常工作,同时兼容 IE 7 哦. 您可能感兴趣的相关文章 Metr ...
    
		
    6. 
						
  6. 15款最好的 jQuery Modal（模态窗口）插件
		
    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...
    
		
    7. 
						
  7. 使用bootstrap的插件实现模态框效果
		
    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
    
		
    8. 
						
  8. asp.netajax与jquery和bootstrap的无刷新完美实现
		
    20190421asp.netajax与jquery和bootstrap的无刷新完美实现 设计代码和后台代码中重要部分加粗和深色以及字号加大. 设计前台代码: <%@ Page Title=&q ...
    
		
    9. 
						
  9. BootStrap学习(6)_模态框
		
    一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mysql主键的缺少导致备库hang
			
    最近线上频繁的出现slave延时的情况,经排查发现为用户在删除数据的时候,由于表主键的主键的缺少,同时删除条件没有索引,或或者删除的条件过滤性极差,导致slave出现hang住,严重的影响了生产环境的 ...
    
			
    2. 
						
  2. 底板芯片组与内存映射(Motherboard Chipsets and the Memory Map) 【转】
			
    转自:http://blog.chinaunix.net/uid-25909619-id-4194650.html 底板芯片组与内存映射 我打算写一些关于计算机内部构造(computer intern ...
    
			
    3. 
						
  3. idea如何编译maven项目
			
    这里我们介绍两种方式,如何调试出窗口 点击菜单栏View->Tool  Windows->Maven projects 点击菜单栏Help->Find Action(Ctrl+Shi ...
    
			
    4. 
						
  4. Android: 详解触摸事件如何传递
			
    当视图的层次结构比较复杂的时候,触摸事件的响应流程也变得复杂. 举例来说,你也许有一天想要制作一个手势极其复杂的 Activity 来折磨你的用户,你经过简单思索,认为其中应该包含一个 PageVie ...
    
			
    5. 
						
  5. window BIOS设置硬盘启动模式
			
      bios如何设置硬盘启动模式?BIOSD硬盘模试主是要针对IDE接口的硬盘和SATA接口的硬盘来设置的.以前的主板只支持一种类型.现在的智能笔记本主板支持:IDE Mode.AHCI Mode.下 ...
    
			
    6. 
						
  6. C++ code：低级编程
			
    1 C编程 所谓低级编程,是相对于面向对象或基于对象的抽象层次更高的高级编程而言,就是: (1)不用C++STL的资源库,尽量减少内在的创建.调用.分配等的开销: (2)对程序管辖的内存进行直接操作访 ...
    
			
    7. 
						
  7. CAS单点登录流程
			
    CAS的官方站点: https://apereo.github.io/cas/5.2.x/index.html 概念解读: The TGT (Ticket Granting Ticket), stor ...
    
			
    8. 
						
  8. .NetCore下B/S结构 初探基于遗传学算法的中学自动排课走班（二）
			
    分析下染色体基因 这里用 老师 课程 班级 教室 周天 上下晚 课时作为染色体编码我封装了如下类 /// <summary> /// NP 授课事件 由教室.课程.班级 时间片段构成 li ...
    
			
    9. 
						
  9. CSS3中border-image属性详解
			
    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
    
			
    10. 
						
  10. vs2010下sort比较函数链接错误问题
			
    环境:win7 + vs2010 + C++ 实现vector的sort算法,在类的头文件中写入比较函数时会出现链接错误: error LNK2005: "bool __cdecl comp ...
    
			
    11.