Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
使用弹窗在网页中显示短信息还行，虽然不那么地友好。然而，弹窗对于如同网站服务条款的长信息就无能为力的了。这是需要使用一个叫模态框modal的东西，并且在模态框里面嵌入一个多行文本框textarea。
这个东西，如果要手工写JavaScript代码就太难做了，但是使用Bootstrap来编写就简单起来。
一、基本目标
有一个网页，网页上面有一个超级链接，一个按钮：
点击他们都会打开一个如下所示的模态框，这个模态框，点击右上角的X按钮与下方的确定都会关闭。
二、制作过程
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同一目录，站点文件夹的结构大致如下：
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）模态框部分
模态框的基本如下：
因此也就有了如下代码：
<!--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个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
主要内容：用法,实例,选项,方法,实例,事件,实例弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Tooltip）插件。或者，正如 B
-
我不知道为什么youtue_title和youtube_description是空的？？？在我添加文本到这个编辑文本？？？我一直这样做为什么现在它不工作？？？ 有问题吗，因为它在弹出窗口中？
-
问题内容： 我有这个网页，我想使其自动化。这是应用程序的步骤和功能。 使用Selenium启动应用程序 单击某些按钮后，将在主页上弹出一个框架 我可以通过硒Web驱动程序在框架上执行操作 但同一框架中有一个日历图标。 单击日历图标后，将弹出一个带有日历和“确定”按钮的弹出窗口。 我可以在弹出窗口中选择日期，然后单击“确定”按钮，弹出窗口会自动关闭。 现在，我想再次切换到FRame来执行进一步的操作
-
我是新手。我知道这个问题已经被问了很多次了，但是到目前为止还没有一个完整的解决方案。我首先开始运行一些没有GUI的代码，通过简单地设置主题，这是成功的。现在，我想添加对话框显示错误从代码，但我不能得到它显示！ 因此我创建了一个空视图，其中wrap_content作为宽度和高度，但我不确定应该为活动中的AlertDialog对象使用什么view元素。我在另一个活动中测试了所有的代码，所有的工作都很好
-
本文向大家介绍JS实现在网页中弹出一个输入框的方法，包括了JS实现在网页中弹出一个输入框的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现在网页中弹出一个输入框的方法。分享给大家供大家参考。具体分析如下： 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框，然后让你输入密码在登录查看的效果吧，这个JS代码就是实现这个在当前页面中弹出一个输入框，当然你可以输入任
-
本文向大家介绍layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)，包括了layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)的使用技巧和注意事项，需要的朋友参考一下 layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设置会自动关闭原来的layer, 解决办法如下: type参数: 0（信息框，