使用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实现多层、自适应模态窗口的全部内容了,非常的不错,而且很实用,直接就可以使用到项目中去。

Javascript 相关文章推荐
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
jQuery之选项卡的简单实现
2014/02/28 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
node.js基础知识小结
2018/02/26 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
python中类的一些方法分析
2014/09/25 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python中实现控制小数点位数的方法
2019/01/24 Python
解决python运行启动报错问题
2020/06/01 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
企划专员岗位职责
2013/12/09 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
技术入股合作协议书
2016/03/21 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL