mip-lightbox 弹出层

由用户控制展现或关闭的全屏浮层组件,组件全屏覆盖。

标题内容
类型通用
支持布局N/A
所需脚本https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js

示例

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button on="tap:my-lightbox.toggle" id="btn-open" role="button" tabindex="0"> Open lightbox </button> <mip-lightbox id="my-lightbox" layout="nodisplay" class="mip-hidden"> <div class="lightbox"> <h1>Hello, World!</h1> <p> this is the lightbox</p> <span on="tap:my-lightbox.toggle" class="lightbox-close">关闭弹层</span> </div> </mip-lightbox>

配置内容区可滚动

可用于展示搜索结果,用户协议等长内容。添加 content-scroll 属性可配置内容滚动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button on="tap:my-lightbox2.toggle" id="btn-open" role="button" tabindex="0"> 打开用户协议 </button> <mip-lightbox id="my-lightbox2" layout="nodisplay" class="mip-hidden" content-scroll> <div class="lightbox"> <span on="tap:my-lightbox2.toggle" class="lightbox-close">忽略</span> <h1>Hello, World!</h1> <p> this is the lightbox</p> <p> this is the lightbox</p> <p> this is the lightbox</p> <p> this is the lightbox</p> <p> this is the lightbox</p> <p> this is the lightbox</p> <span on="tap:my-lightbox2.toggle" class="lightbox-close">我知道了</span> </div> </mip-lightbox>

自动关闭

注意: 此属性与 classmip-lightbox-seconds 的标签配套使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button on="tap:my-lightbox3.toggle" id="btn-open" role="button" tabindex="0"> Open lightbox </button> <mip-lightbox autoclosetime="5" id="my-lightbox3" layout="nodisplay" class="mip-hidden"> <div class="lightbox"> <h1>Hello, World!</h1> <p> this is the lightbox</p> <div class="mip-lightbox-countdown">倒计时<span class="mip-lightbox-seconds"></span>秒关闭</div> </div> </mip-lightbox>

属性

id

说明:组件 id 必选项:是 类型:字符串

layout

说明:布局 必选项:是 类型:字符串 取值:nodisplay

autoclose

说明:自定义倒计时,自动关闭,需要与 class="mip-lightbox-seconds" 的标签配套使用,class="mip-lightbox-countdown" 的标签可自定义倒计时样式及文字内容 必选项:否 类型:字符串 取值:数字,单位秒

content-scroll

说明:配置内容区域可以滚动,如果不填则内容不可滚动。 必选项:否

注意事项

  • <mip-lightbox> 默认是隐藏的,作为打开开关的 DOM 节点需设置 on 属性,且 on 属性的属性值为 "tap:组件ID.open"。

  • <mip-lightbox> 需要一个 <div> 子节点,这个 <div>calss 必须有 lightbox,并且必须有 on 属性,属性值为 "tap:组件ID.close"。