网站最后更新日期:2022年3月25日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站(中) 个人网站(EN) 更多联络方式
×

純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/html-css-modal/

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

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

转载请注明:純CSS爲網頁加入模態窗口(模态对话框)教學 | 畅想资源

关键字:, , ,

如果您对本文有任何疑问或建议,欢迎发送邮件至yifei@hesyifei.com(或通过其它途径)联系我们,谢谢!