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 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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
php基础教程
2015/08/26 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python实现查找所有程序的安装信息
2020/02/18 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
医药专业推荐信
2013/11/15 职场文书
公司董事长职责
2013/12/12 职场文书
珍惜水资源建议书
2014/03/12 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
会计实训总结范文
2015/08/03 职场文书