WordPress教程-网站纯代码添加透明弹窗广告效果

WordPress 纯代码实现弹窗广告步骤如下：

1、修改JavaScript 代码：

<span class="hljs-keyword">var</span> popup = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'qgg_popup'</span>);
<span class="hljs-keyword">var</span> popup_box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.qgg_popup_box'</span>);
<span class="hljs-keyword">var</span> popup_close = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.qgg_popup_close'</span>);
<span class="hljs-comment">// 窗口加载时弹出</span>
<span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
    popup.style.display = <span class="hljs-string">"block"</span>;
}
<span class="hljs-comment">// 点击窗体其他位置时关闭</span>
<span class="hljs-built_in">window</span>.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
    <span class="hljs-keyword">if</span> (event.target == popup) {
        popup.style.display = <span class="hljs-string">"none"</span>;
    }
}
popup_box.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
    popup.style.display = <span class="hljs-string">"none"</span>;
}
<span class="hljs-comment">// 点击关闭按钮时关闭</span>
popup_close.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
    popup.style.display = <span class="hljs-string">"none"</span>;
}

使用WordPress建站的朋友将JS代码丢到主题的主JS文件中去即可。DUX主题用户直接丢到主题 js 文件夹下的 main.js 文件中即可。其他程序建站的朋友可以放到自己相应的JS文件里。

2、修改CSS样式代码：

<span class="hljs-comment">/* 弹窗广告css */</span>
<span class="hljs-selector-tag">html</span>, <span class="hljs-selector-tag">body</span>{ <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>:<span class="hljs-number">100%</span>; }
<span class="hljs-selector-id">#qgg_popup</span>{
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">display</span>: none;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">margin</span>: auto;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">36</span>, <span class="hljs-number">36</span>, <span class="hljs-number">36</span>, <span class="hljs-number">0.8</span>);
}

<span class="hljs-selector-class">.qgg_popup_box</span> { 
    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">10</span>; 
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">280px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">396px</span>;
    <span class="hljs-attribute">margin</span>: auto;
    <span class="hljs-attribute">text-align</span>: center; 
} 
<span class="hljs-selector-class">.qgg_popup_close</span>{
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">36px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">36px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>;
    <span class="hljs-attribute">float</span>: right;
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">24px</span>;
    <span class="hljs-attribute">text-align</span>: center;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">36px</span>;
    <span class="hljs-attribute">font-weight</span>: bold;
}

<span class="hljs-selector-class">.qgg_popup_close</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.qgg_popup_close</span><span class="hljs-selector-pseudo">:focus</span> {
    <span class="hljs-attribute">color</span>: red;
    <span class="hljs-attribute">cursor</span>: pointer;
}

<span class="hljs-selector-class">.qgg_popup_img</span>{
    <span class="hljs-attribute">position</span>:relative;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">36px</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;
    <span class="hljs-attribute">width</span>:<span class="hljs-number">240px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">360px</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;
}
@<span class="hljs-keyword">media</span> (max-width: <span class="hljs-number">640px</span>){
    <span class="hljs-selector-class">.qgg_popup_close</span>{ <span class="hljs-attribute">display</span>: none; }
}

3、修改html代码：

<span class="hljs-comment">&lt;!-- 弹窗广告 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"qgg_popup"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"qgg_popup_box"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"qgg_popup_close"</span>&gt;</span>&amp;times;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"qgg_popup_img"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./1.png"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

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

注意，添加以上代码后你的站点弹出可能会在背景后面，css样式中添加 z-index：9999即可