网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 更多联络方式
×

纯CSS为网页加入模态窗口(模态对话框)教学

相信大家近期在访问畅想资源时都发现在看了文章主体部分后会自动于网页上显示一内容为Facebook专页/微博的窗口,这就是所谓的模态窗口(内地称为模态对话框)了。这个模态窗口可以帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方。今天“畅想资源”就来教大家如何使用纯CSS(当然还有JS以显示/隐藏窗口)来为网页加入这个模态窗口~ :laugh:

X

欢迎访问“畅想资源”!

你也可以试试拉伸浏览器窗口来查看效果哦~ :laugh:

预览

打开测试模态窗口

教学

1、首先我们当然先写弹窗的CSS部分:

注:如需修改模态窗口的长宽,在修改 .modalDialog > divheight width 的同时记得也要根据自己的情况慢慢调试修改 margin-left 以及 margin-top

2、然后就是开启/隐藏的函数控制:为实现淡入淡出的效果,我们需要先使用 display: block 来取消隐藏、等待500毫秒后再调整窗口的 opacity1 (否则将会出现突然弹出的情况);而关闭窗口则是先调整窗口的 opacity0 、等待500毫秒后在 display: none 来完全隐藏,完美实现淡入淡出效果

注:本例中我使用了jQuery来进行上述操作,实际上JS等亦可以达到同样效果(详情请自行Google) :razz:

3、最后就是把弹窗的内容加入到网页里面去,以及加入相关按钮

提示:按钮部分可以以别的方式触发,例如本站就以用户完成观看文章内容部分为触发方式

4、现在你的“模态窗口”就可以正常使用啦!(点击测试

历史上的今天

2014年:Linux技巧:screen指令使用教学(4条评论)

觉得这篇文章有用吗?分享一下让更多人受益吧!

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”于“”发布,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/zh-cn/html-css-modal/

本文章由“超级efly”于2015年07月10日发表于“网络”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:纯CSS为网页加入模态窗口(模态对话框)教学 | 畅想资源

关键字:, , ,

纯CSS为网页加入模态窗口(模态对话框)教学:目前有 15 条留言
访客以 11:4 大幅领先博主

评论载入中,请稍等……
  1. 10楼
    浩宇知时节 China Google Chrome Windows

    好文,学习了,必须点个赞!

    [回复]
  2. 9楼
    晓庄 China Google Chrome Windows

    不错的功能哦。跟悬浮窗口差不多的。
    想问下博主,有没有直接集成的代码高亮教程啊。不需要插件

    [回复]
  3. 8楼
    自述网 China Google Chrome Windows

    好蛋疼,竟然是拉丁文!

    [回复]
  4. 7楼
    Jenny China Netscape Navigator iPhone

    怎样恢复数据?

    [回复]
  5. 6楼
    Jenny China Netscape Navigator iPhone

    数据能恢复吗?

    [回复]
  6. 5楼
    牧羊人 China Google Chrome Windows

    这是好文章啊!!

    [回复]
  7. 4楼
    快乐家园 China Google Chrome Windows

    样式较丑,不说了、 :mrgreen:

    [回复]
  8. 地板
    sven Google Chrome Mac OS

    这个真的很不错啊!

    [回复]
  9. 板凳
    浴室防滑垫 China Google Chrome Windows

    好文章!支持一下! :idea:

    [回复]
  10. 沙发
    IT疯狂女 China Google Chrome Windows

    来看看代码大大,嘿嘿

    [回复]

发表评论



微笑 调皮 偷笑 可爱 大笑 坏笑 诡计 赞 疑问 HI~ 爱 抱歉 对不起 头晕 惊讶 帅 努力 劳累 疯狂 难过 大哭 差 猪 邪恶 无言 愤怒 流汗 擦汗


快捷键:Ctrl+Enter