mip-lightbox 弹层

收藏848

阅读14027

更新时间2022-04-11

mip-lightbox 是由用户控制展现或关闭的一个全屏浮层组件,组件全屏覆盖,组件里的元素超出屏幕会被隐藏,不能滑动。

QQ截图20170204115730.png

示例

<button on="tap:my-lightbox.open" 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>
    </div>
</mip-lightbox>

属性

id

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

layout

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

注意事项

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

  • 作为关闭 lightbox 的 dom 节点需要设置 on 属性,且 on 属性值为"tap:组件ID.close"。

  • 同时作为打开关闭 lightbox 的 dom 节点需要设置 on 属性,且 on 属性值为"tap:组件ID.toggle"。

  • mip-lightbox 需要一个 div 子节点,这个 div 的 calss 必须有 lightbox。

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

220622次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

619062次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

239149次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

394761次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

230705次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

62万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.5万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.3万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.9万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34.1万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号