WordPress 網站添加彈窗廣告【純代碼】
1、修改 JavaScript 代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var popup = document.getElementById('qgg_popup'); var popup_box = document.querySelector('.qgg_popup_box'); var popup_close = document.querySelector('.qgg_popup_close'); // 窗口載入時彈出 window.onload = function() { popup.style.display = "block"; } // 點擊窗體其他位置時關閉 window.onclick = function(event) { if (event.target == popup) { popup.style.display = "none"; } } popup_box.onclick = function() { popup.style.display = "none"; } // 點擊關閉按鈕時關閉 popup_close.onclick = function() { popup.style.display = "none"; } |
使用 wordpress 建站的朋友將 JS 代碼丟到主題的主 JS 文件中去即可。DUX 主題用戶直接丟到主題 js 文件夾下的 main.js 文件中即可。其他程序建站的朋友可以放到自己相應的 JS 文件里。
2、修改 CSS 樣式代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* 彈窗廣告css 2018-8-29 */ html, body{ margin:0; height:100%; } #qgg_popup{ position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; margin: auto; background: rgba(36, 36, 36, 0.8); } .qgg_popup_box { z-index: 10; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 280px; height: 396px; margin: auto; text-align: center; } .qgg_popup_close{ position: relative; width: 36px; height: 36px; background: #fff; color: #999; float: right; font-size: 24px; text-align: center; border-radius: 50%; line-height: 36px; font-weight: bold; } .qgg_popup_close:hover, .qgg_popup_close:focus { color: red; cursor: pointer; } .qgg_popup_img{ position:relative; top: 36px; left: 0px; width:240px; height:360px; border-radius: 15px; } @media (max-width: 640px){ .qgg_popup_close{ display: none; } } |
使用 WordPress 搭建網站的朋友將代碼丟到主題的 style.css 文件中即可。DUX 主題丟到 main.css 文件中即可。使用其他網站程序的添加到相應的 css 文件中。
3、修改 html 代碼:
這段代碼是前端顯示的 HTML ,將其放到你想要其顯示的頁面中即可,比如首頁文件 index.php 、文章文件 single.php 中即可。
1 2 3 4 5 6 7 |
<!-- 彈窗廣告 --> <div id="qgg_popup"> <div class="qgg_popup_box"> <span class="qgg_popup_close">×</span> <img class="qgg_popup_img" src="./1.png"> </div> </div> |
注意,代碼中「./1.png」這裡需要修改成你自己的彈窗廣告圖片地址。這樣就可以實現為網站添加彈窗廣告的功能了,有網站需要彈窗功能的朋友可以自己試一下。可能這樣小小的修改有時候就能為你網站賺錢增加一個新的渠道!
由於網站搬家,部分鏈接失效,如無法下載,請聯繫站長!謝謝支持!
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » WordPress 網站添加彈窗廣告【純代碼】
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » WordPress 網站添加彈窗廣告【純代碼】