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数组处理多个字符串的连接问题
Aug 20 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
Vue.js用法详解
Nov 13 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vue 自定义组件添加原生事件
Apr 21 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读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python几种常用功能实现代码实例
2019/12/25 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
党课培训主持词
2014/04/01 职场文书
小学生评语大全
2014/04/18 职场文书
房展策划方案
2014/06/07 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
客房领班岗位职责
2015/02/11 职场文书
民政工作个人总结
2015/02/28 职场文书
农业项目合作意向书
2015/05/08 职场文书
余世维讲座观后感
2015/06/11 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
PyTorch device与cuda.device用法
2022/04/03 Python