首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用jQuery和Bootstrap实现多层、自适应模态窗口

Posted in Javascript onDecember 22, 2014

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

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

使用jQuery和Bootstrap实现多层、自适应模态窗口

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

使用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实现多层、自适应模态窗口

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript Array数组对象的扩展函数代码
May 22 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
javascript动态创建及删除元素的方法
Dec 22 #Javascript
了不起的node.js读书笔记之例程分析
Dec 22 #Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 #Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 #Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 #Javascript
axios(1) 高动态范围(1) InputStream(1) OutputStream(1) 曝光融合(1) HDR(1) Vue3(1) 连接器(1) persistedstate(1) vuex(1)
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
超清晰的document对象详解
2007/02/27 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用（七）
2017/06/04 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
django跳转页面传参的实现
2020/09/17 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
白俄罗斯在线大型超市：e-dostavka.by
2019/07/25 全球购物
英文简历中的自我评价
2013/10/06 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
财务管理专业求职信
2014/06/11 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书