BootStrap学习(6)_模态框
一、模态框
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果只使用该功能,只引入BootStrap中的 modal.js即可
1.用法:
您可以切换模态框(Modal)插件的隐藏内容:
- 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
- 通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:20px;margin-left:20px;"> <h3>创建模态框(Modal)</h3>
<!-- 按钮触发模态框 -->
<table class="table table-bordered">
<thead>
<tr>
<th>书名</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>三国演义</td>
<td>50</td>
<td ><button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
修改
</button></td>
</tr>
</tbody>
</table> <!-- 模态框(Modal) -->
<form >
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
<table class="table table-condensed">
<tr><td>书名:<input type="text" value="三国演义"/>价格:<input type="text" value="50" /></td></tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal -->
</div> </form>
</body>
</html>
效果:
代码讲解:
- 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
- 如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。
- 在模态框中需要注意两点:
- 第一是 .modal,用来把 <div> 的内容识别为模态框。
- 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
- aria-labelledby="myModalLabel",该属性引用模态框的标题。
- 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
- <div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
- class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
- data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
- class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
- class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
- data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
选项: 在点出模态窗的按钮上加上:data-backdrop='static' 可以指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
2.事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
show.bs.modal | 在调用 show 方法后触发。 |
$('#identifier').on('show.bs.modal', function () { |
shown.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 |
$('#identifier').on('shown.bs.modal', function () { |
hide.bs.modal | 当调用 hide 实例方法时触发。 |
$('#identifier').on('hide.bs.modal', function () { |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 |
$('#identifier').on('hidden.bs.modal', function () { |
show方法:即弹出模态框事件
hide:方法:即关闭模态框事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="margin-top: 20px; margin-left: 20px;"> <h3>创建模态框(Modal)</h3>
<!-- 按钮触发模态框 -->
<table class="table table-bordered">
<thead>
<tr>
<th>书名</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>三国演义</td>
<td>50</td>
<td>
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal" data-backdrop="static">
修改
</button>
</td>
</tr>
</tbody>
</table> <!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
<table class="table table-condensed">
<tr>
<td>书名:<input type="text" value="三国演义" />价格:<input type="text" value="50" /></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script>
$(function () {
$('#myModal').on('hide.bs.modal', function () {
alert('真的要取消修改吗...');
})
});
</script>
</body>
</html>
效果:
点关闭时会触发事件。
三、提示工具
是基于BootStrap里面的(Tooltip)插件, 如果单单想用这个功能,可以直接用 tooltip.js这个插件.
当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。
1.用法有两种
1.1 通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。
<a href="#" data-toggle="tooltip" title="提示信息">把鼠标停在我的上面</a>
1.2 通过 JavaScript:通过 JavaScript 触发提示工具(tooltip):
$('#identifier').tooltip(options)
注意: 您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip):
$(function () { $("[data-toggle='tooltip']").tooltip(); });
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head>
<body style="margin-top: 20px; margin-left: 20px;">
<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">
顶部的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">
底部的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="right"
title="右侧的 Tooltip">
右侧的 Tooltip
</a> <br/>
<h4>提示工具(Tooltip)插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip
</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>
效果:
2.提示工具的方法
方法 | 描述 | 实例 |
Options: .tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
Toggle: .tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle') |
Show: .tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show') |
Hide: .tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide') |
Destroy: .tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy') |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head>
<body >
<div style="padding: 100px 100px 10px;">
<a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip 方法 show
</a><br /><br />
<a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip 方法 hide
</a><br /><br />
<a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip 方法 destroy
</a><br /><br />
<a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip 方法 toggle
</a><br /><br />
<p class="tooltip-options" >
<a href="#" data-toggle="tooltip" title="'am Header2">Tooltip 方法 options
</a>
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show'); });
$(function () { $('.tooltip-hide').tooltip('hide'); });
$(function () { $('.tooltip-destroy').tooltip('destroy'); });
$(function () { $('.tooltip-toggle').tooltip('toggle'); });
$(function () {
$(".tooltip-options a").tooltip({ html: true });
});
</script>
</div>
</body>
</html>
效果:
BootStrap学习(6)_模态框的更多相关文章
- Bootstrap 学习笔记7 模态框插件
网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- bootstrap学习<三>打开模态窗体
可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-targ ...
- 关于bootstrap 在MVC里 模态框里加载iframe页面做编辑的时候
前台代码 <div class="modal fade" id="myModal" tabindex="-1" role=" ...
- bootstrap中的data-toggle模态框相关
一,点击即打开1,点击按钮 <a href="javascript:void(0)" class="btn btn-primary" data-toggl ...
- Bootstrap手动打开隐藏模态框
开发的时候遇到一个bug,关闭模态框后背景灰色图层依旧还在.原来是用错了隐藏模态框的代码. 正确的调用方式如下: $("#id").modal("show"); ...
- BootStrap学习(4)_分页&标签&缩略图&警告&进度条
一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. .pagination --添加该 class 来在页面上显示分页. .disa ...
随机推荐
- Salesforce的公式和验证规则
公式 在Salesforce中,有些功能不需要从数据库中直接读取的数据,而是基于这些数据之间的关系来做出判断.这种情况下就要用到"公式"功能. 公式的概念和Excel中的公式类似, ...
- ScrollView与ListView的事件冲突
布局文件 当ListView嵌套在ScrollView中时,会发生冲突,导致ListView控件的拉动效果消失‘ 解决办法: 重写ListView的onTouchEvent(),并在返回前调用getP ...
- 在td中的输入英文为什么不自动换行???
在表格中如果输入纯汉字,表格中的内容会根据表格大小进行换行,若果一个老外不会写汉字,写了一堆英文,表格的宽度会拉的很长,超过规定宽度 解决方法是在table中加上style="table-l ...
- 怎么查找Jenkins的个人api token
程序中可变部分解释:其中server.build_job方法传入的参数channel为分渠道构建参数,也即jenkins job的参数,这个参数随不同的日常job不同是不同的,实际编写脚本的过程中这个 ...
- 我的博客:C# PHP J2ee Java Android js WP Asp.net mvc Python
<p><A target="_blank" href="http://blog.163.com/hr_company_product/" &g ...
- Java中当前对象引用
题: 计算机画图时,有点的概念,每个点由它的横坐标x 和 纵坐标 y 描述. 写一个类. 求两个点之间的曼哈顿距离 = 横向距离 + 纵向距离 例如,一个点(0,0) 和另一个点(1,1)的曼哈顿距离 ...
- python第六十六天--sqlalchemy
#!usr/bin/env python #-*-coding:utf-8-*- # Author calmyan #python #2017/7/6 21:29 #__author__='Admin ...
- 【第六篇】SAP ABAP7.5x新语法之SQL注入
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:SAP ABAP7.5x系列之SQL注入 前 ...
- 对Spring的理解(简单)!
1.Spring是对j2EE诸多功能进行封装了的一个工具集:它的核心就是提供了一种新的机制来管理业务对象及依赖关系:具体就是控制反转.依赖注入,Aop(面向切面). Spring的底层实现机制是用De ...
- Chrome及Chrome内核浏览器改变开发者工具字体大小
1.打开浏览器,按F12调用开发者工具 2.按Ctrl+数字加号键,可看到字体变大,按Ctrl+数字减号键,字体变小 3.重新启动浏览器后字体仍然保持修改后的字体大小