Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗


Posted in Javascript onJune 30, 2016

使用弹窗在网页中显示短信息还行,虽然不那么地友好。然而,弹窗对于如同网站服务条款的长信息就无能为力的了。这是需要使用一个叫模态框modal的东西,并且在模态框里面嵌入一个多行文本框textarea。
这个东西,如果要手工写JavaScript代码就太难做了,但是使用Bootstrap来编写就简单起来。 

一、基本目标 

有一个网页,网页上面有一个超级链接,一个按钮: 

Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

点击他们都会打开一个如下所示的模态框,这个模态框,点击右上角的X按钮与下方的确定都会关闭。 

Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

二、制作过程 

1.因为需要使用Bootstrap,所以先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时,Bootstrap3所提供的JavaScript效果需要到jQuery1.11(点击打开链接)支持,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11(点击打开链接),而不是不兼容旧浏览器IE6的jQuery2。下载完之后,配置好站点目录。把Bootstrap3直接解压到站点目录,而把jquery-1.11.1.js放到js目录,也就是与bootstrap.js同一目录,站点文件夹的结构大致如下: 

Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

2.本网页编码如下,下面一个片段一个片段进行分析: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>模态框</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>

 <body>
 <p>
 <a data-toggle="modal" data-target="#myModal">服务协议</a>
 </p>
 <p>
 <button type="button" class="btn btn-danger" data-toggle="modal"
 data-target="#myModal">
 点击此阅读服务协议
 </button>
 </p>
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">
 <span>×</span>
 </button>
 <h4 class="modal-title" id="myModalLabel">
 服务协议
 </h4>
 </div>
 <div class="modal-body">
 <p align="center">
 <textarea class="form-control" rows=3 readonly="true" />
 本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。
 </textarea>
 </p>
 </div>
 <div class="modal-footer">
 <p align="center">
 <button type="button" class="btn btn-default"
 data-dismiss="modal">
 确定
 </button>
 </p>
 </div>
 </div>
 </div>
 </div>

 </body>
</html>

(1)<head>部分

<head>
 <!--页面编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>模态框</title>
 <!--要求本网页自动适应PC、平板、手机等设备的屏幕-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--本例需要三个外部插件所支持-->
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>

(2)最初在网页所呈现的链接与按钮

<p>
  <!--data-toggle="modal" data-target="#myModal"要求打开的myModal的模态框-->
 <a data-toggle="modal" data-target="#myModal">服务协议</a>
 </p>
 <p>
  <!--class="btn btn-danger"是按钮在Bootstrap的样式。-->
 <button type="button" class="btn btn-danger" data-toggle="modal"
 data-target="#myModal">
 点击此阅读服务协议
 </button>
 </p>

(3)模态框部分

模态框的基本如下: 

Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

因此也就有了如下代码:   

<!--class="modal fade"是要求模态框以动画效果fade打开,class="modal"也行,但打开得十分唐突。id="myModal"与上面的超级链接、按钮相呼应-->
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">
  <!--必须在modal-content之后才能进行模态框的布局。-->
 <div class="modal-content">
 <div class="modal-header">
   <!--这是模态框的标题部分, ×加分号 为×的转移字符,实质是一个关闭按钮-->
 <button type="button" class="close" data-dismiss="modal">
 <span>×</span>
 </button>
   <!--这是模态框的标题-->
 <h4 class="modal-title" id="myModalLabel">
 服务协议
 </h4>
 </div>
 <div class="modal-body">
   <!--这是模态框的主体部分,内嵌一个行数为3的只读文本框,文本框在模态框主体部分居中,不用文本框也可以,但内容会一次性呈现给用户,那还不如直接弹窗算了?-->
 <p align="center">
 <textarea class="form-control" rows=3 readonly="true" />
 本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。 
    本协议服务条款具有法律效力。
 </textarea>
 </p>
 </div>
 <div class="modal-footer">
   <!--这是模态框的尾部,就放一个居中的确定按钮-->
 <p align="center">
 <button type="button" class="btn btn-default"
 data-dismiss="modal">
 确定
 </button>
 </p>
 </div>
 </div>
 </div>
 </div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
AngularJS表单验证功能
Oct 19 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 #Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 #Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 #Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 #Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 #Javascript
老生常谈 js中this的指向
Jun 30 #Javascript
JS使用cookie设置样式的方法
Jun 30 #Javascript
You might like
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php数组键名技巧小结
2015/02/17 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
如何在JavaScript中正确处理变量
2020/12/25 Javascript
利用python程序帮大家清理windows垃圾
2017/01/15 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python删除服务器文件代码示例
2018/02/09 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Django model update的多种用法介绍
2020/03/28 Python
详解python破解zip文件密码的方法
2020/01/13 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
专业实习自我鉴定
2013/10/29 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
消防志愿者活动方案
2014/08/23 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
监察建议书
2015/02/04 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python