应用HTML5和CSS3制做1个模态框的示例

日期:2021-02-23 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

本文详细介绍了应用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 会掩藏;

实际效果示例

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:总结html5自定特性有哪些 返回下一篇:没有了