我們平時訪問網(wǎng)站、博客時經(jīng)常會打開網(wǎng)頁后看到彈出一個圖片廣告。

如果作為普通訪客可能會略有抵觸，但是作為站長，我們卻十分需要這樣的廣告來為網(wǎng)站賺錢貼補一下服務器維護費用。說實話我挺喜歡這個功能的，但是一直未找到合適的代碼，直到我看了“蟈蟈要安靜”的博客。

方法一：純代碼實現(xiàn)

1、修改JavaScript 代碼：

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樣式代碼：

/* 彈窗廣告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 搭建網(wǎng)站的朋友將代碼丟到主題的 style.css 文件中即可。DUX 主題丟到 main.css 文件中即可。使用其他網(wǎng)站程序的添加到相應的css文件中

3、修改html代碼：

這段代碼是前端顯示的 HTML ，將其放到你想要其顯示的頁面中即可，比如首頁文件 index.php 、文章文件single.php 中即可。

<!-- 彈窗廣告 --><div id="qgg_popup"> <div class="qgg_popup_box"> <span class="qgg_popup_close">&times;</span> <img class="qgg_popup_img" src="./1.png"> </div></div>

注意，代碼中“./1.png”這里需要修改成你自己的彈窗廣告圖片地址。這樣就可以實現(xiàn)為網(wǎng)站添加彈窗廣告的功能了，有網(wǎng)站需要彈窗功能的朋友可以自己試一下。可能這樣小小的修改有時候就能為你網(wǎng)站賺錢增加一個新的渠道！