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

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

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

具体页面实现部分如下：

<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. 从Dying gasp功能看Linux的响应速度(zhuan)
			
    转自https://blog.csdn.net/qq_20405005/article/details/77967358 前一阵子在做dying gasp功能测试,过程中恰好测试到了Linux的响应速 ...
    
			
    2. 
						
  2. 打包部署到tomcat
			
    部署到tomcat的方法 注意:在eclipse 或 idea 上需要引入外部tomcat 1.将程序打成war包启动tomcat 2.将target 文件下内容压缩城zip,发布到tomcat RO ...
    
			
    3. 
						
  3. 使用java如何操作elasticsearch？简单示例。
			
    在线API:https://www.elastic.co/guide/en/elasticsearch/client/java-api/2.4/transport-client.html教程:http ...
    
			
    4. 
						
  4. python3 str.format()的使用
			
    基本格式 {字段名!转换字段:格式说明符} 字段名:省略:数字:变量名 'name is {}, age is {}'.format('peter',25) 'name is {1}, age is  ...
    
			
    5. 
						
  5. mysql innodb 行级锁升级
			
    创建数据表test,表定义如下所示: CREATE TABLE `test` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NO ...
    
			
    6. 
						
  6. [USACO17FEB]Why Did the Cow Cross the Road I G
			
    一开始想写$DP$,发现直接转移完全有后效性 所以本小蒟蒻写了个最短路 每走三步就要吃草是这个题最难搞的地方,我们建图时不妨只对于距离等于三的点连边 考虑完全覆盖所有情况,从一个点走一步,两步,然后三 ...
    
			
    7. 
						
  7. metasploit利用漏洞渗透攻击靶机
			
    1.网络测试环境构建 首先需要先配置好一个渗透测试用的网络环境,包括如图1所示的运行Kali Linux系统的计算机,如图2所示的老师给的Windows Server 2000系统的计算机.这两台计算 ...
    
			
    8. 
						
  8. spfa学习笔记
			
    序 spfa它死了 --by 大佬 但是本蒟蒻还是一如既往的使用spfa... 因为太弱了,其他什么都不会.于是就疯狂开O2跪倒在spfa上. 例题--汽车加油行驶问题 loj跳转链接 luogu跳转 ...
    
			
    9. 
						
  9. Java List 转 String
			
    JAVA中List转换String,String转换List,Map转换String,String转换Map之间的转换工具类(调优)https://www.cnblogs.com/cn-wxw/p/6 ...
    
			
    10. 
						
  10. XML与HTML区别
			
    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— Xml简介 1. xml是什么? Xml 是eXtended markup lang ...
    
			
    11.