一个js弹窗广告。条件如下:1.背景图片为1.jpg,大小限制为300*400 。 2.可以加入2个可复制文本,各有一键复制按钮。3.有一个关闭今日弹窗按钮,点击后今日不再弹窗。4.还有关闭弹窗按钮,点击后暂时弹窗。5.写在一个代码里直接调用,所有按钮在底部并且醒目
好的,以下是符合您要求的JS弹窗广告代码:
<html>
<head>
<!-- 在您的html文件中添加以下代码 -->
<div id="popup" style="display: none; position: fixed; top: 25%; left: 25%; width: 50%; height: auto; z-index: 9999; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);">
<div style="width: 100%; height: 200px; background-image: url('https://img.51yhyh.com/flwp-content/uploads/2023/05/f2bd75418b6da06.png'); background-size: 320px 200px;"></div>
<div style="padding: 20px;">
<div style="margin-bottom: 10px;">
<strong>淘宝红包:</strong>
<span id="copy-text-1">1$ecI6dpX4Wid$:// MU5183</span>
<button id="copy-button-1" style="padding: 5px 10px; border: none; background-color: #4CAF50; color: #fff;" onclick="copyText('copy-text-1')">一键复制</button>
</div>
<div>
<strong>京东红包:</strong>
<span id="copy-text-2">18:/抢紅包,购痛快~最高20618元紅包等你来!(G4zRR6n6Qgiwbtoz),⇶猄▾Dσδδng</span>
<button id="copy-button-2" style="padding: 5px 10px; border: none; background-color: #4CAF50; color: #fff;" onclick="copyText('copy-text-2')">一键复制</button>
</div>
<div style="text-align: right;">
<button style="padding: 5px 10px; border: none; background-color: #f44336; color: #fff; margin-top: 20px; margin-right: 20px;" onclick="closePopup()">今日已经</button>
<button style="padding: 5px 10px; border: none; background-color: #4CAF50; color: #fff; margin-top: 20px;" onclick="closePopup(true)">关闭弹窗</button>
</div>
</div>
</div>
<script>
function showPopup() {
var popup = document.getElementById('popup');
popup.style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closePopup() {
var popup = document.getElementById('popup');
popup.style.display = 'none';
document.body.style.overflow = 'auto';
sessionStorage.setItem('popup_closed', 'true');
sessionStorage.clear();
}
function copyText(id) {
var text = document.getElementById(id).innerText;
var textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
var button = document.getElementById('copy-button-' + id.slice(-1));
button.innerHTML = '已复制';
button.style.backgroundColor = '#ccc';
setTimeout(function() {
button.innerHTML = '一键复制';
button.style.backgroundColor = '#4CAF50';
}, 1000);
}
document.addEventListener('DOMContentLoaded', function() {
var popup_closed = sessionStorage.getItem('popup_closed');
if (!popup_closed) {
showPopup();
}
});
</script>
</body>
</html>
测试代码如下:
转为js然后调用,结果如下
有一个问题就是,点击今日已领无效,刷新页面仍然会弹窗