快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

模态框 Modal

概述

基础组件,触发业务逻辑时使用。

模态框构成

模态框交互构成:外层交互容器j-mod + j-modal模态框容器 + j-modal-docker模态框实例。

外层交互容器j-mod提供背景交互遮罩,默认visibility:hidden opacity:0,你可以直接进行JS交互唤醒模态框。

你可以利用j-modal-maskj-modal-close做关闭交互处理。

基础浮层

用法:设置类j-docker-modal。浮层和遮幕结构如下:

.j-mod
    .j-modal
        .j-docker-modal
            .j-modal-header
                span.j-modal-header-title
                a.j-modal-close.iconfont.icon_close
            .j-modal-content
            .j-modal-footer
        .j-modal-mask
标题
我是内容区
完善手机号
请完善手机号
根据《中华人民共和国网络安全法》和有关法律法规要求,使用互联网服务需进行账号实名,请验证并绑定手机号。
提示文本
微信扫码登录
微信扫码登录
提示文本
普通登录对话框
登录
提示文本
提示文本
富登录对话框
登录
提示文本
提示文本
付费阅读对话框
支付
¥5280
请选择支付方式
余额 243
支付赞赏对话框
赞赏
用户昵称
您的支持是对我最大的动力
0/30
余额 243
扫码赞赏对话框
赞赏
用户昵称
您的支持是对我最大的动力

微信赞赏

支付宝赞赏

支付等待对话框
支付
支付中
支付等待中
支付成功对话框
支付
支付成功
页面将在2秒内自动返回
支付失败对话框
支付
支付失败
支付失败,请重新支付
Web微信扫码支付对话框
微信支付
请打开微信手机客户端扫码支付
请在X秒内完成支付
余额支付对话框
余额支付
¥5280
账户余额 ¥26430
提现提醒对话框
余额提现
您未设置提现账户,无法提现,请先完善提现设置!
用户名片海报对话框
站点名称
我是用户简介description
李院长
文章海报对话框
站点名称
Gucci全新手袋系列以意为王子的梵文命名,以虎头标识为亮点。
作者昵称
文章海报对话框
站点名称
Gucci全新手袋系列以意为王子的梵文命名,以虎头标识为亮点。
¥ 13600¥ 18000
上一章:折叠面板 Collapse
下一章:动画 Animation