三种弹出广告代码开发实战

PS：代码示例里的优惠码什么的都是瞎编的。

Google Ads API 开发文档： developers.google.com/google-ads/...

页面加载后立即弹出

这种广告在用户打开网页后立即显示，适合展示重要的欢迎信息或首次访问优惠。

html 复制代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="modal-overlay" id="popupModal">
  <div class="modal">
    <button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
    <h2>欢迎访问</h2>
    <p>感谢您访问我们的网站！我们为您准备了专属优惠。</p>
    <p>使用优惠码 <strong>WELCOME10</strong> 可享受9折优惠。</p>
    <div class="modal-actions">
      <button class="primary" id="acceptOffer">查看详情</button>
      <button id="declineOffer">关闭</button>
    </div>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  padding: 30px;
  position: relative;
}
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  color: #333;
  cursor: pointer;
  flex: 1;
}
button.primary {
  background: #333;
  color: white;
  border-color: #333;
}
</style>

<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');

function closeModal() {
  modal.style.display = 'none';
}

closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);

acceptOfferBtn.addEventListener('click', function() {
  alert('正在跳转到优惠详情页面...');
  closeModal();
});

modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    closeModal();
  }
});
</script>

延迟弹出广告（3秒后显示）

这种广告在页面加载后延迟几秒显示，让用户先浏览内容，减少对初始体验的干扰。

html 复制代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="modal-overlay" id="popupModal">
  <div class="modal">
    <button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
    <h2>特别优惠</h2>
    <p>您已浏览我们的网站一段时间，我们为您准备了专属优惠。</p>
    <p>使用优惠码 <strong>DELAY15</strong> 可享受85折优惠。</p>
    <div class="modal-actions">
      <button class="primary" id="acceptOffer">立即使用</button>
      <button id="declineOffer">稍后再说</button>
    </div>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  padding: 30px;
  position: relative;
}
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  color: #333;
  cursor: pointer;
  flex: 1;
}
button.primary {
  background: #333;
  color: white;
  border-color: #333;
}
</style>

<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');

function showModal() {
  modal.style.display = 'flex';
}

function closeModal() {
  modal.style.display = 'none';
}

closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);

acceptOfferBtn.addEventListener('click', function() {
  alert('优惠码 DELAY15 已应用！');
  closeModal();
});

modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    closeModal();
  }
});

setTimeout(showModal, 3000);
</script>

退出意图检测弹出广告

这种广告在检测到用户准备离开页面时触发，适合挽留用户或提供最后时刻的特别优惠。原理是检测用户鼠标到了浏览器顶部，有 X 掉网站的嫌疑。

html 复制代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="modal-overlay" id="popupModal">
  <div class="modal">
    <button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
    <h2>请不要离开！</h2>
    <p>我们注意到您准备离开，为您准备了特别优惠。</p>
    <p>使用优惠码 <strong>STAY20</strong> 可享受8折优惠。</p>
    <div class="modal-actions">
      <button class="primary" id="acceptOffer">留下来看看</button>
      <button id="declineOffer">仍然离开</button>
    </div>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  padding: 30px;
  position: relative;
}
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  color: #333;
  cursor: pointer;
  flex: 1;
}
button.primary {
  background: #333;
  color: white;
  border-color: #333;
}
</style>

<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');

function showModal() {
  modal.style.display = 'flex';
}

function closeModal() {
  modal.style.display = 'none';
}

closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);

acceptOfferBtn.addEventListener('click', function() {
  alert('优惠码 STAY20 已应用！');
  closeModal();
});

modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    closeModal();
  }
});

document.addEventListener('mouseout', function(e) {
  if (e.clientY < 10) {
    showModal();
  }
});
</script>

三种 弹出广告 代码开发实战

页面加载后立即弹出

延迟弹出广告（3秒后显示）

退出意图检测弹出广告

三种弹出广告代码开发实战