模态框

模态框

第一代互联网(PC互联网)是一个信息集合时代,也是一个门户时代,可以理解为信息互联网。第二代互联网(移动互联网)是一个位置+信息+服务时代,是用户通过移动终端,随时随地,快捷、交互地获取端到端信息。

而今天,我们将有幸能目睹并且体验第三代互联网的到来——VR/AR时代。我们可以找个新的名词,叫做“可体验的人机交互时代”,或是“可穿戴的物联网时代”。VR/AR时代,原有的内容全部不能使用,必须重新产生新的适合眼镜硬件观看的VR/AR内容,并且内容形式发生质的变化,从二维到三维,从平面变成了立体。这就是上面说的新硬件和新内容。

可选尺寸

模态框提供了两个可选尺寸,通过为 .modal-dialog 增加一个样式调整类实现。

动画效果

您可以给模态窗口添加任何动画效果,从动画页面选取一些动画效果添加到.modal-content元素。

参数

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性,需要将参数名称放到 data-之后,例如 data-backdrop=""

名字 类型 默认值 描述
backdrop boolean 或 字符串 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true 键盘上的 esc 键被按下时关闭模态框。
show boolean true 模态框初始化之后就立即显示出来。
remote path false

This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是一个实例:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>