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

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

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

具体页面实现部分如下：

<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. 利用 devcon.exe实现自动安装驱动（转）
			
    http://blog.csdn.net/u012814201/article/details/44919125 工作的原因打算通过devcon.exe实现自动打包的功能,由于之前一直在Linux那个 ...
    
			
    2. 
						
  2. MVC layout 命名空间引用问题
			
    虽然用MVC做了很多项目,但是都是在别人搭好的框架上实现 今天碰到一个很简单的命名空间引用问题 如图所示,Scripts和Styles 都没有引用命名空间 解决方法一: 直接使用 System.Web ...
    
			
    3. 
						
  3. springboot配置mybatis的mapper路径
			
    1.在src/main/resources/目录下新建mybatis文件夹,将xxx.xml文件放入该文件夹内 2.在application.yml文件中配置: mybatis: configurat ...
    
			
    4. 
						
  4. Coursera台大机器学习技法课程笔记11-Gradient Boosted Decision Tree
			
    将Adaboost和decision tree相结合,需要注意的地主是,训练时adaboost需要改变资料的权重,如何将有权重的资 料和decision tree相结合呢?方法很类似于前面讲过的bag ...
    
			
    5. 
						
  5. Qwidget+opencv显示图像
			
    步骤 1. 设置opencv库路径 在.pro文件中添加 INCLUDEPATH += D:/opencv/OpencvMingw/opencv310/include LIBS += D:/openc ...
    
			
    6. 
						
  6. vue1.0
			
    vue1.0学习总结   前言 使用vue已经有三.四个月了,但是只是学着使用了一些基本方法.因为现在的前端框架越来越多(Angular,React...),但是我相信万变不离其宗,很多用法框架之间还 ...
    
			
    7. 
						
  7. 001.YUM源服务端搭建
			
    一 前期准备 1.1 地址规划 主机名 IP地址 备注 mirrors 172.24.8.71/24 yum服务器,与互联网同步 client 172.24.8.72/24 内部客户端 1.2 架构示 ...
    
			
    8. 
						
  8. 安装redis时候的坑
			
    安装redis时候的坑 随手记录一下,以此为借鉴. 1.按照需求下载redis服务 redis可视化文件 2.安装及环境搭建 修改服务里redis.windows-service.conf文件,或者r ...
    
			
    9. 
						
  9. Bzoj5209[Tjoi2012]防御:姿势题
			
    首先这题现在在BZOJ上是没数据的,你可以选择python2B获得AC,也可以去洛谷上交.选择第一个选项的现在可以不用看了...... 关于这题的题意,击破的一次攻击即使溢出也不双倍,否则你过不了样例 ...
    
			
    10. 
						
  10. 利用cve-2017-11882的一次渗透测试
			
    利用工具:https://github.com/Ridter/CVE-2017-11882/ 影响版本: office 2003 office 2007 office 2010 office 2013 ...
    
			
    11.