WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 数码解说
    • 生活趣事
    • 生活日记
  • 全球科技
    • 新浪博客
    • A5资讯
    • 环球网新闻
  • 编程教学
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
  • 专题
  • 基友
  • 隐私
  • 云优化
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君

WordPress 网站添加弹窗广告【纯代码】

夏柔12月 3, 2019

1、修改 JavaScript 代码:

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 搭建网站的朋友将代码丢到主题的 style.css 文件中即可。DUX 主题丢到 main.css 文件中即可。使用其他网站程序的添加到相应的 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”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现为网站添加弹窗广告的功能了,有网站需要弹窗功能的朋友可以自己试一下。可能这样小小的修改有时候就能为你网站赚钱增加一个新的渠道!

1234567891011121314151617181920var 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 样式代码:

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

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

2
等 2 人赞过
分享
夏柔 站长
文章 712评论 23
赞赏
夏柔
相关文章
  • 全网首发-日主题V2角标亲测美化
  • 自定义onion域名
  • 宝塔linux面板一键工具箱
  • 7种提高代码阅读能力的方法
  • 保护你的WordPress,修改服务器默认用户名root
  • Python多线程扫描端口
  • ThnBo-一款针对WordPress开发的缩略图美化插件,为广大站长提供缩略图的美化便利
  • WordPress去除index.php的方法
  • WordPress美化-文字渐变特效
  • WordPress美化-抖动图片
17 4月, 2020
RIPRO主题美化-底部动图介绍
夏柔
站长
夏山如碧 - 怀柔天下
712文章
23评论
58144K获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
31省新增12例确诊 均为境外输入
2月 24, 2021
31省新增10例确诊 均为境外输入
2月 23, 2021
31省新增11例确诊 均为境外输入
2月 22, 2021
更多
每日快讯
惠若琪宣布怀孕
2月 25, 2021
上海发现低龄自闭症患儿新药
2月 25, 2021
25岁女孩欠二十万外债抑郁失联
2月 25, 2021
10人当选全国脱贫攻坚楷模
2月 25, 2021
一家12口持BNO护照投奔英国被遣返
2月 25, 2021
超1800人牺牲在脱贫攻坚一线
2月 24, 2021
张伯礼:年底有望恢复到疫情前状态
2月 24, 2021
货拉拉就女孩跳车身亡道歉
2月 24, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号