- Framework7 教程
- Framework7 - 首页
- Framework7 - 概述
- Framework7 - 环境
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧边栏
- Framework7 - 内容块
- Framework7 - 布局网格
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表单
- Framework7 - 标签页
- Framework7 - Swiper 滑块
- Framework7 - 照片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 懒加载
- Framework7 样式
- Framework7 - 色彩主题
- Framework7 - 分割线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 长按事件
- Framework7 - 触摸波纹
- Framework7 有用资源
- Framework7 - 快速指南
- Framework7 - 有用资源
- Framework7 - 讨论
Framework7 - 覆盖层弹出窗口
描述
弹出窗口是一个弹出框,当用户点击使用popup类别的元素时,会显示内容。
弹出窗口的大小在不同的设备上有所不同。在手机上,它将全屏显示,而在平板电脑上,它将以 630px 的宽度和高度显示。您可以添加tablet-fullscreen类,以便在平板电脑上全屏显示。
您可以通过以下表格中指定的方式以两种方式打开和关闭弹出窗口:
序号 | 类型 |
---|---|
1 | 来自 HTML
您可以使用类和数据属性打开和关闭弹出窗口。 |
2 | 使用 JavaScript
您可以使用 JavaScript 代码打开和关闭弹出窗口。 |
弹出窗口事件
序号 | 事件 | 目标 & 描述 |
---|---|---|
1 | open | 弹出窗口元素 当您打开动画时,此事件将被触发。 |
2 | opened | 弹出窗口元素 当动画打开完成时,此事件将被触发。 |
3 | close | 弹出窗口元素 当您关闭动画时,此事件将被触发。 |
4 | closed | 弹出窗口元素 当动画关闭完成时,此事件将被触发。 |
您还可以使用其 HTML 到 App 方法创建动态弹出窗口。这里有一个示例。
framework7_overlays.htm
广告