额，想了半天不知道如何开篇~~~，还是直接上代码吧。
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 文件中即可。
推荐站内搜索：com域名注册1元、php空间租用、vps主机、国外php空间、欧洲服务器、cn域名价格、美国防攻击服务器、美国服务器、免费虚拟主机、免费空间申请、
