WordPress 網站添加彈窗廣告【純代碼】

1、修改 JavaScript 代碼:

 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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 樣式代碼:


 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /* 彈窗廣告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 中即可。
 | 1 2 3 4 5 6 7 | <!— 彈窗廣告 —><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”這里需要修改成你自己的彈窗廣告圖片地址。這樣就可以實現為網站添加彈窗廣告的功能了,有網站需要彈窗功能的朋友可以自己試一下。可能這樣小小的修改有時候就能為你網站賺錢增加一個新的渠道!

人已贊賞
網絡教程

WordPress代碼實現XML網站地圖教程

2019-12-1 22:45:31

網絡教程

寶塔6.9.9開心版教程

2019-12-1 22:47:32

0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
有新消息 消息中心
搜索
秒速飞艇是合法的吗