本文详细介绍了应用HTML5和CSS3制做1个模态框的示例,共享给大伙儿,实际以下:
源代码示例
将会你其实不想看我下面的1堆冗杂的表明,想立即查询源代码或1个线上示例。下面的连接,是我应用 CSS3 的 transition(过渡),opacity(不全透明度),pointer-event(指针恶性事件)等特性建立的1个作用型模态框。
你能够点一下它前往 Github 查询源代码: ModalBox-Tutorial
HTML 构造
前端开发的组件全是由业务流程和互动情景来驱动器,模态框也不列外,普遍的情景就是开展某个实际操作,如点一下按钮,随后显示信息1个模态框,意见反馈给客户或正确引导客户去实行接下来的互动。1个模态框的互动将会会包括 5 个流程:
1. 有1个按钮或连接,客户点一下它来开启模态框的显示信息;
2. 模态框显示信息时,会有1个全透明的遮罩层,遮挡住当今全部视口;
3. 模态框內容会以非全透明色(一般是白色)出現在视口某个部位(一般是正中间);
4. 模态框內容(一般在右上角)会有1个“关掉”标示,点一下它会让模态框掩藏;
5. 模态框內容应当是依据具体业务流程情景所特定的,因而能够为随意构造。
款式
1. .modalbox 最开始是掩藏的;
1. .modalbox 为1个全透明的遮罩层;
2. .modalbox-dialog 为1个非全透明的內容层;
3. 点一下 显示信息模态框连接 后,.modalbox 会显示信息;
4. 点一下 .modalbox-close-btn 后,.modalbox 会掩藏;
实际效果示例
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。