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

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

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

具体页面实现部分如下：

<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. PHP中的__clone()
			
    1 <?php 2 class Account { 3 public $balance; 4 5 public function __construct($balance) { 6 $this- ...
    
			
    2. 
						
  2. SqlServer共用表达式（CTE）With As
			
    共用表表达式(CTE)可以看成是一个临时的结果集,可以再SELECT,INSERT,UPDATE,DELETE,MARGE语句中多次引用. 一好处:使用共用表表达式可以让语句更加清晰简练. 1.可以定 ...
    
			
    3. 
						
  3. 关于idtcpserver的使用
			
    原文:http://blog.csdn.net/hnxxcxg/article/details/2798019 用idTCPServer,客户端接上来时,如何取得客户端的IP? IP:=AThread ...
    
			
    4. 
						
  4. FileSystemResource在Srping FrameWork 5中的变化
			
    之前在项目中一直使用FileSystemResource这个类作为PropertyPlaceholderConfigurer的Resource引入部署目录外的配置文件,并设置了setIgnoreRes ...
    
			
    5. 
						
  5. “漂亮的”排序算法 Stooge Sort 如何完成排序
			
    Stooge Sort 是一种低效的递归排序算法,甚至慢于冒泡排序.在<算法导论>第二版第7章(快速排序)的思考题中被提到,是由Howard.Fine等教授提出的所谓“漂亮的”排序算法.  ...
    
			
    6. 
						
  6. 使用matplotlib绘制散点图
			
    在matplotlib中使用函数 matplotlib.pyplot.scatter 绘制散点图,matplotlib.pyplot.scatter的函数签名如下: matplotlib.pyplot ...
    
			
    7. 
						
  7. grep 详解
			
    grep 是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.(global search regular expression(RE) and print out the l ...
    
			
    8. 
						
  8. priority_queue<int>q;
			
    priority_queue<int>q;//默认不递增q.size();//q中有几个元素q.pop();//删除队首q.top();//返回队首元素q.push();//在队列中插入一 ...
    
			
    9. 
						
  9. 支付宝app支付服务端流程
			
    支付宝APP支付服务端详解 前面接了微信支付,相比微信支付,支付宝APP支付提供了支付封装类,下面将实现支付宝APP支付.订单查询.支付结果异步通知.APP支付申请参数说明,以及服务端返回APP端发起 ...
    
			
    10. 
						
  10. Java 内存模型 ，一篇就够了！
			
    Java 虚拟机   我们都知道 Java 语言的可以跨平台的,这其中的核心是因为存在 Java 虚拟机这个玩意.虚拟机,顾名思义就是虚拟的机器,这不是真实存在的硬件,但是却可以和不同的底层平台进行交 ...
    
			
    11.