BootStrap学习(6)_模态框_html/css_WEB-ITnose

一、模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果只使用该功能，只引入BootStrap中的 modal.js即可

1.用法：

您可以切换模态框（Modal）插件的隐藏内容：

$('#identifier').modal(options)

效果:

代码讲解：

选项: 在点出模态窗的按钮上加上:data-backdrop='static' 可以指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。

2.事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

$('#identifier').on('show.bs.modal', function () {  // 执行一些动作...})

$('#identifier').on('shown.bs.modal', function () { // 执行一些动作...})

$('#identifier').on('hide.bs.modal', function () { // 执行一些动作...})

$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...})

show方法:即弹出模态框事件

hide:方法:即关闭模态框事件

效果:

点关闭时会触发事件。

三、提示工具

是基于BootStrap里面的(Tooltip)插件, 如果单单想用这个功能，可以直接用 tooltip.js这个插件.

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。

1.用法有两种

1.1 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

把鼠标停在我的上面

1.2 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$('#identifier').tooltip(options)
注意: 您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

效果:

2.提示工具的方法

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

效果: