当前位置：首页 > JavaScript

js广告弹窗实现

2026-02-03 04:47:16JavaScript

基础弹窗实现

使用alert()函数可以快速创建简单的弹窗：

alert("这是一个基础弹窗");

自定义弹窗样式

通过HTML+CSS创建更美观的弹窗：

<div id="customPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:white; box-shadow:0 0 10px rgba(0,0,0,0.5); z-index:1000;">
  <p>自定义弹窗内容</p>
  <button onclick="document.getElementById('customPopup').style.display='none'">关闭</button>
</div>

<script>
function showPopup() {
  document.getElementById('customPopup').style.display = 'block';
}
</script>

定时弹出广告

使用setTimeout实现延时弹出：

setTimeout(function(){
  document.getElementById('customPopup').style.display = 'block';
}, 3000); // 3秒后弹出

关闭按钮交互

为弹窗添加关闭功能：

document.querySelector('.close-btn').addEventListener('click', function(){
  this.parentElement.style.display = 'none';
});

弹窗位置控制

动态计算弹窗位置：

function centerPopup(popup) {
  popup.style.left = (window.innerWidth - popup.offsetWidth)/2 + 'px';
  popup.style.top = (window.innerHeight - popup.offsetHeight)/2 + 'px';
}

阻止背景滚动

弹窗出现时锁定页面：

document.body.style.overflow = 'hidden';
// 关闭时恢复
document.body.style.overflow = '';

弹窗动画效果

添加CSS过渡动画：

.popup {
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
}
.popup.show {
  opacity: 1;
  transform: scale(1);
}

Cookie控制频率

使用cookie记录上次弹出时间：

function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + (days*24*60*60*1000));
  document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

js广告弹窗实现