使用jQuery和Bootstrap实现多层、自适应模态窗口
2014-12-22 00:00
901 查看
本篇实践一个多层模态窗口,而且是自适应的。
点击页面上的一个按钮,弹出第一层自适应模态窗口。
在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口。
具体页面实现部分如下:
以上就是jQuery和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>
以上就是jQuery和Bootstrap实现多层、自适应模态窗口的全部内容了,非常的不错,而且很实用,直接就可以使用到项目中去。
相关文章推荐
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
- 使用jquery iframe 动态实现模态窗口
- 使用Jquery仿模态对话框插件Remodal实现弹出响应窗口
- 使用JQuery控制iframe自适应窗口大小
- 使用jQuery创建模态窗口登陆效果 - WEB开发者
- angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习
- 多个按钮触发同一个Bootstrap自适应模态窗口
- javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
- 使用jQuery创建模态窗口登陆效果
- 使用jQuery将多条数据插入模态框的实现代码
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- 使用jquery实现弹出窗口效果(居中、左下角、右下角)
- Jquery实现WIN7-AeroWindow窗口效果插件使用
- 使用jquery实现以post打开新窗口
- 在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- 【原创】Jquery实现模态窗口—simplemodal
- Pop Easy – 轻松实现模态窗口的 jQuery 插件
- 使用jQuery创建模态窗口登陆效果
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题