打开网页后简单广告框弹窗两种方法实现纯代码

《打开网页后简单广告框弹窗两种方法实现纯代码》正文开始，本次阅读大概2分钟。

我们平时访问网站、博客时经常会打开网页后看到弹出一个图片广告。

如果作为普通访客可能会略有抵触，但是作为站长，我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用。说实话我挺喜欢这个功能的，但是一直未找到合适的代码，直到我看了“蝈蝈要安静”的博客。

方法一：纯代码实现

1、修改JavaScript 代码：

varpopup=document.getElementById(qgg_popup);varpopup_box=document.querySelector(.qgg_popup_box);varpopup_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样式代码：

/*弹窗广告css2018-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 中即可。

!--弹窗广告--divid=qgg_popupdivclass=qgg_popup_boxspanclass=qgg_popup_closetimes;/spanimgclass=qgg_popup_imgsrc=./1.png/div/div

注意，代码中“./1.png”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现为网站添加弹窗广告的功能了，有网站需要弹窗功能的朋友可以自己试一下。可能这样小小的修改有时候就能为你网站赚钱增加一个新的渠道！