在线读者墙html代码,纯代码为网站添加弹窗广告

额，想了半天不知道如何开篇~~~，还是直接上代码吧。

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 文件中即可。

CSS样式代码

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 文件中即可。

前端HTML显示代码

×

这段代码是前端显示的 HTML ，将其丢到你想要其显示的页面中即可，比如 index.php 、single.php 文件中即可。