首页
所有分类
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 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
bootstrap制作jsp页面（根据值让table显示选中）
Jan 05 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Angular单元测试之事件触发的实现
Jan 20 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
分块(1) decorator(1) 装饰器(1) bs4(1) 读取(1) translation(2) 网页解析(1) 数组(5) 查找算法(1) 数据保存(1)
You might like
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
详解vue 单页应用（spa）前端路由实现原理
2018/04/04 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python网络编程学习笔记(四)：域名系统
2014/06/09 Python
Python中文字符串截取问题
2015/06/15 Python
python 队列详解及实例代码
2016/10/18 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
浅谈python出错时traceback的解读
2020/07/15 Python
非洲NO.1网上商店：Jumia肯尼亚
2016/08/18 全球购物
美国最大的户外装备和服装购物网站：Backcountry
2019/10/15 全球购物
工程班组长岗位职责
2013/12/30 职场文书
中学生自我评价2015
2015/03/03 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL