o 覆盖

可配置的自定义覆盖框,用于显示覆盖窗口。 封面也可以被切换到小屏幕上以不同方式显示.

• 使用量
• 标记
• 萨斯
• Java 脚本
  • 声明
  • 强制性
  • 选项参考
  • API 概览
• 活动
• 解决问题
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-overlay。 。 。 .

标记

可创建新的覆盖 绝对 与 JavaScript, 没有标记 。 或者,通过添加覆盖内容的模板和一个打开覆盖内容的按钮,对覆盖表进行声明定义.

要定义模板,请添加以下内容: script 标记包含您覆盖的内容。 请指定一个唯一的 id 用于模板 :

<script type="text/template" id="overlay1-content">
    <p>Content of overlay</p>
</script>

然后加一个触发器 button 与阶级 o-overlay-trigger,将单击打开覆盖。 通过指定模板将触发器连接到您的重叠 id 内 data-o-overlay-src 带有 # (以表格形式) id 选择器) (中文(简体) ). 然后用一个独特的 ID 来命名您的覆盖 data-o-overlay-id 属性.

<button
    class="o-overlay-trigger"
    data-o-overlay-src="#overlay1-content"
    data-o-overlay-id="overlay1"
>
    Open!
</button>

配置 覆盖选项 作为数据属性添加到触发元素中, data-o-overlay-[OPTION]。例如添加 data-o-overlay-compact="true" 用于压缩叠加:

<button
    class="o-overlay-trigger"
    data-o-overlay-src="#overlay1-content"
    data-o-overlay-id="overlay1"
    data-o-overlay-compact="true"
>
    Open!
</button>

萨斯

包含 oOverlay 混合到全部输出样式 o-overlay 特性 :

@include oOverlay();

.o-overlay {
    /* styles */
}
.o-overlay--compact {
    /* styles */
}
.o-overlay--full-screen {
    /* styles */
}
/* etc. */

为通过选项指定输出样式的具体变体(见 变体 供选择.

例如,只输出基底样式和 compact 变量,忽略其他变量:

@include oOverlay(
    $opts: (
        'variants': (
            'compact',
        ),
    )
);

.o-overlay {
    /* styles */
}
.o-overlay--compact {
    /* styles */
}

备选案文

本表列出您可在 oOverlay 混合数字 :

Java 脚本

声明

Java 脚本已禁用 o-overlay 自动为 折纸建筑服务 用户。 如果你的项目是使用人工构建程序, 备忘 o-overlay 手动。 。 。 .

比如说叫 init 启用全部方法 o-overlay 文档中的实例 :

import oOverlay from 'o-overlay';
oOverlay.init();

或将元素传递到地址簿 o-overlay 实例:

import oOverlay from 'o-overlay';
const oOverlayElement = document.getElementById('#my-o-overlay-element');
oOverlay.init(oOverlayElement);

强制性

您也可以构造一个新的覆盖 o-overlay 要素。 构造者接受两个论点:

• id: 页面内覆盖的唯一标识字符串
• 选项:配置覆盖的 JSON 对象

var myOverlay = new Overlay('myOverlay', {
    html: 'Hello world',
    trigger: '.blah',
});

选项参考

• heading: 对象。 重叠头选项
  • .title:弦乐. 你的封面标题
  • .visuallyhidetitle:布尔. 如果您想要提供不同的标题样式, 此选项将防止标题跨度被添加到覆盖中 。 (在这种情况下,标题仅用于 aria 标签) 默认:虚.
  • .shaded:布尔. 是否遮蔽标题的背景 。 注:为了适当运作 heading-shaded 变量必须包含在 CSS 中( 它是默认的)
• modal:布尔. 重叠是否应该有模式行为 。 这将在页面和覆盖之间增加一个半透明阴影. Modal 覆盖也禁用基础文档上滚动. 默认: 对.
• fullscreen:布尔. 如果设置为真, 覆盖将显示全屏幕 。 此覆盖会禁用基础文档的滚动, 并用后键解析 。 注:为了适当运作 full-screen 变量必须包含在 CSS 中( 它是默认的)
• compact:布尔. 如果真是这样的话 .o-overlay--compact 类将添加到覆盖中,从而减少内容中标题字体大小和平面。 注:为了适当运作 compact 变量必须包含在 CSS 中( 它是默认的)
• src:弦乐. 无论是a url 密码 hTML 可以装入覆盖符,或者一个查询Selector字符串,以识别一个元素,从中提取文本 Content.
• html: 字符串或 HTMLElement. Raw HTML( 无法声明设置)
• class:弦乐. 用于覆盖的自定义类,例如:. o-overlay--my-modifier。 。 。 .
• trigger: 字符串或 HTMLElement. 查询选择器表达式或 HTMLElement. 当出现触发设定时,会在其上添加一个点击事件处理器,以相应打开或关闭覆盖. (无法声明设置)
• zindex:弦乐. 覆盖的 CSS z 索引属性值 . 通过 CSS 设置默认:"10" (中文(简体) )
• preventclosing:布尔. 防止通过标准x按钮或出逃密钥关闭覆盖. 用于引导用户到其他地方时. 只有模式设置为真才有效 .
• customclose:布尔. 如果您不使用标题, 但想要在 html / src 中提供关闭按钮( 包含以下类别 ) o-overlay__close),设置自定义与真将连接到该按钮上的 o-overlay 的近端处理器功能 .
• parentnode:弦乐. 应该是 DOM 元素的查询选择器 。 如果设置了,则该覆盖表将作为这个文件机构或目标的孩子附上。 如果多个节点匹配,它将使用第一个节点. 如果没有匹配此选择器, 则 body 将被使用.
• nested:布尔. 如果设置为真, 将不设置调整大小并逃出密钥的听众 。 这种布尔应结合 parentnode 设置允许在 DOM 元素内放置一个覆盖符,而不是在万事俱备上覆盖. 默认:虚.
• nofocus:布尔. 如果设置为真,则不将标签索引设置在包装元素上。 有用,结合 nested 财务报告和审定财务报表 parentnode 选项. 默认:虚.
• layer:布尔. 如果设定为真, 当创建了新的覆盖时, 覆盖会关闭 。 它会起火 oOverlay.layerOpen 财务报告和审定财务报表 oOverlay.layerClose 创建和破坏时的事件。 如果使用 nested 重叠. 默认: 对.

必须设定的唯一选项是 src 或者说 html编辑 html 选项不能设置为 data- 属性,如果设置两者,则 html 一个会覆盖 src。 。 。 .

对于紧凑的叠加,标题不能被遮蔽,因为这看起来也很奇怪.

数据属性与JSON格式相同,但带有破折号. 这么说吧 src 这将是 data-o-overlay-src 联合国 heading.title 这将是 data-o-overlay-heading-title。 。 。 .

如果选项设置不正确, o- overlay 将会出错 .

API 概览

静态方法

• getOverlays(): 返回页面上所有覆盖的数组
• init([el]): 为所有人重叠 o-overlay-trigger 内部要素 el (或 document.body 如果未指明)
• destroy():从触发元素中销毁所有重叠对象并解封事件处理器.

对象方法

• open: 显示覆盖。 内容每次打开封面都会被加载.
• close:收(收)上盖.
• realign:调整上线. 当覆盖内容在打开时更改时有用 .

活动

• oOverlay.layerOpen:在覆盖物出现之前即已发出,并表明其他覆盖物应当关闭 layer 选项设置为对.
• oOverlay.layerClose: 是在取消覆盖之后, 当 layer 选项设置为对.
• oOverlay.ready:当覆盖被装入DOM时即发出. 准备就绪的活动包括: detail.instance 属性 o-overlay 举个例子.
• oOverlay.destroy: 重叠从DOM中移除时发送.

解决问题

• IE8在关闭从第二次开始的重叠时会抛出一个错误. 尽管出了差错,它还是像预期的那样起作用.
• Safari和Chrome移动 别支持 自动聚焦属性。 在Chrome手机中,您可以使用 .focus() 函数,当 oOverlay.ready 用于模拟行为.
• 在iOS8上的Safari手机中,自动焦点是 错误 然后在覆盖加载后被触发 达阵 在此之后发送事件。 这意味着如果在页面加载后点击页面上的任何地方,键盘就会出现,这很可能会产生出乎意料的行为. 我们建议不要在iOS 8中使用自动焦点. 这些出人意料的行为 只有在第一次完成覆盖之后 自动焦点才会被激活.

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .