全百科精品资源分享
免费优质资源下载平台

纯代码给WordPress 网站添加弹窗广告功能

播放按钮
全百科网免费发布推广信息
文章目录

今天全百科给大家分享一个纯代码实现WordPress 弹窗广告的方法,方便我们网站由重大公告或者活动的时候可以让访客更加醒目的看到。

效果演示

纯代码给WordPress 网站添加弹窗广告功能

第一步

修改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文件里。

第二步

修改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; }
}

第三步

修改html代码:

<!-- 弹窗广告 -->
<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”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现为网站添加弹窗广告的功能了,有网站需要弹窗功能的朋友可以自己试一下。可能这样小小的修改有时候就能为你网站赚钱增加一个新的渠道!

Download WordPress Themes Free
Premium WordPress Themes Download
Download WordPress Themes Free
Download Nulled WordPress Themes
download udemy paid course for free
download huawei firmware
Download WordPress Themes
free download udemy course

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
全百科网 » 纯代码给WordPress 网站添加弹窗广告功能
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址