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

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>
相关推荐
两个西柚呀31 分钟前
未在props中声明的属性
前端·javascript·vue.js
子伟-H53 小时前
App开发框架调研对比
前端
桃子不吃李子3 小时前
axios的二次封装
前端·学习·axios
SteveJrong3 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~3 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发4 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii4 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack4 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好4 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O5 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js