如何通过JavaScript实现GDPR弹窗点击后再显示AddThis按钮？

嘿，我碰到过类似的问题，咱们一步步来解决这个移动端AddThis按钮盖在GDPR合规栏上面的麻烦——毕竟GDPR合规是硬要求，得优先保证用户能看到并操作它。下面是几个可行的方案，你可以根据自己的代码情况调整：

1. 先把移动端的AddThis按钮藏起来 #

首先用CSS默认隐藏移动端的AddThis按钮，只在用户确认GDPR授权后再显示。找到AddThis的容器类（通常是addthis_inline_share_toolbox），添加媒体查询样式：

/* 移动端默认隐藏AddThis分享按钮 */
@media (max-width: 768px) {
  .addthis_inline_share_toolbox {
    display: none !important;
  }
}

2. 监听GDPR接受事件，触发AddThis显示 #

找到你的GDPR栏的“接受”按钮，给它绑定点击事件，当用户点击接受后，显示AddThis按钮，同时如果AddThis需要重新初始化的话，调用它的刷新方法：

// 假设GDPR接受按钮的ID是"accept-gdpr-btn"
document.getElementById('accept-gdpr-btn').addEventListener('click', function() {
  // 找到AddThis容器并显示它
  const addThisBox = document.querySelector('.addthis_inline_share_toolbox');
  if (addThisBox) {
    addThisBox.style.display = 'block';
    // 刷新AddThis组件，确保按钮正常加载
    if (window.addthis) {
      window.addthis.layers.refresh();
    }
  }
});

3. 给GDPR栏加层级保障（双重保险） #

为了彻底避免覆盖问题，给GDPR栏设置更高的z-index，确保它在移动端始终处于最上层：

/* 确保GDPR栏在最上层 */
.gdpr-cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* 这个值比AddThis默认的z-index（一般是999）高就行 */
  /* 保留你原来的其他样式 */
}

4. 可选：根据Cookie状态自动显示AddThis #

如果用户之前已经接受过GDPR，可以在页面加载时读取Cookie，直接显示AddThis按钮，不用每次都隐藏：

window.addEventListener('load', function() {
  // 假设存储接受状态的Cookie名为"gdpr_accepted"
  const hasAccepted = document.cookie.split(';').some(cookie => 
    cookie.trim().startsWith('gdpr_accepted=true')
  );
  if (hasAccepted) {
    const addThisBox = document.querySelector('.addthis_inline_share_toolbox');
    if (addThisBox) {
      addThisBox.style.display = 'block';
      if (window.addthis) {
        window.addthis.layers.refresh();
      }
    }
  }
});

这样调整后，移动端用户会先看到GDPR栏，点击接受后才会显示AddThis分享按钮，完全符合合规要求，也解决了覆盖的问题。

内容的提问来源于stack exchange，提问作者Alexis Wilke