额,想了半天不晓得如何开篇~~~,还是直接上代码吧。
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显现代码
<!-- 弹窗广告 --> <div id="qgg_popup"> <div class="qgg_popup_box"> <span class="qgg_popup_close">×</span> <img class="qgg_popup_img" src="./1.png"> </div> </div>
这段代码是前端显现的 HTML ,将其丢到你想要其显现的页面中即可,比方 index.php 、single.php 文件中即可。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 共1条
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!
- 最新
- 最热
只看作者