網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

純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條迴響)

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

本文固定鏈接:http://www.arefly.com/html-css-modal/

本文章由「」於2015年07月10日發表於「網路」分類

你可以發表迴響,並在保留原文地址及作者的情況下引用到你的網站

轉載請注明:純CSS爲網頁加入模態窗口(模态对话框)教學 | 暢想資源

關鍵字:, , ,

以下是廣告時間,廣告內容僅供參考!

廣告載入中...

純CSS爲網頁加入模態窗口(模态对话框)教學:目前有 14 條留言

訪客以 10:4 大幅領先博主

迴響載入中,請稍等...
  1. 9樓
    晓庄 China Google Chrome Windows

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

    [回覆]
  2. 8樓
    自述网 China Google Chrome Windows

    好蛋疼,竟然是拉丁文!

    [回覆]
  3. 7樓
    Jenny China Netscape Navigator iPhone

    怎样恢复数据?

    [回覆]
  4. 6樓
    Jenny China Netscape Navigator iPhone

    数据能恢复吗?

    [回覆]
  5. 5樓
    牧羊人 China Google Chrome Windows

    这是好文章啊!!

    [回覆]
  6. 4樓
    快乐家园 China Google Chrome Windows

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

    [回覆]
  7. 3樓
    sven Google Chrome Mac OS

    这个真的很不错啊!

    [回覆]
  8. 2樓
    浴室防滑垫 China Google Chrome Windows

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

    [回覆]
  9. 沙發
    IT疯狂女 China Google Chrome Windows

    来看看代码大大,嘿嘿

    [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter