Google Ad Manager弹窗广告问题咨询：关闭按钮异常及显示逻辑优化

问题原因分析 #

• 桌面端关闭按钮不显示：原代码将关闭按钮放在广告容器<div id='div-gpt-ad-xxx'>内部，GPT渲染广告时会覆盖或重置容器内的原有内容，导致按钮被隐藏；同时按钮未设置层级，可能被广告元素遮挡。
• 移动端无广告时关闭按钮仍显示：按钮直接写在静态DOM中，未关联广告加载状态，无论广告是否成功返回都会显示。

修复方案 #

1. 将弹窗容器初始设为隐藏，仅在广告成功加载后显示
2. 将关闭按钮移到广告容器外层，避免被GPT渲染覆盖
3. 监听GPT的slotRenderEnded事件，判断广告是否成功加载，动态控制弹窗显示

完整修复代码 #

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
  // 定义广告位
  const popupSlot = googletag.defineSlot(
    '/108655xxx/posao-desktop-popup', 
    [[320, 480], [300, 300], [500, 500]], 
    'div-gpt-ad-1656934240929-0'
  ).addService(googletag.pubads());
  
  googletag.pubads().enableSingleRequest();
  googletag.enableServices();

  // 监听广告渲染完成事件
  googletag.pubads().addEventListener('slotRenderEnded', function(event) {
    const popupContainer = document.getElementById('popup-ad-container');
    const closeBtn = document.getElementById('popup-close-btn');
    // 仅当广告成功加载（有内容）时显示弹窗
    if (event.slot === popupSlot && event.isEmpty === false) {
      popupContainer.style.display = 'block';
      // 绑定关闭事件
      closeBtn.addEventListener('click', function() {
        popupContainer.style.display = 'none';
      });
    } else {
      // 无广告时隐藏弹窗
      popupContainer.style.display = 'none';
    }
  });
});
</script>

<!-- 弹窗容器，初始隐藏 -->
<div id="popup-ad-container" style="left: 50%; transform: translate(-50%, 0); text-align: center; position: fixed; z-index: 9999; bottom: 0px; display: none;">
  <!-- 关闭按钮，放在广告容器外层 -->
  <span id="popup-close-btn" style="color: white; position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,0.5); padding: 2px 5px; cursor: pointer; z-index: 10000;">✕</span>
  <!-- 广告容器 -->
  <div id='div-gpt-ad-1656934240929-0'>
    <script>
      googletag.cmd.push(function() { googletag.display('div-gpt-ad-1656934240929-0'); });
    </script>
  </div>
</div>

关键修改点 #

• 新增弹窗容器popup-ad-container，初始设置display: none
• 关闭按钮移到广告容器外，设置更高的z-index确保不被广告遮挡
• 通过slotRenderEnded事件判断广告是否加载成功（event.isEmpty === false），仅此时显示弹窗
• 用事件监听替代内联onclick，更符合现代JS规范

内容的提问来源于stack exchange，提问作者Dragnet Pro