js右下角弹出广告代码

封面图 • 2025-10-21 • JavaScript

在网页中实现右下角弹出广告的功能，通常可以通过 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例代码，用于在页面加载后从右下角弹出一个广告框：

---

### ✅ 示例：右下角弹出广告（使用 JavaScript）

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>右下角弹出广告</title>
  <style>
    /* 广告样式 */
    #adBox {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 15px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      display: none; /* 初始隐藏 */
      z-index: 9999;
    }

/* 关闭按钮样式 */
    .close-btn {
      float: right;
      cursor: pointer;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="adBox">
    <span class="close-btn" onclick="closeAd()">X</span>
    <p>这是右下角的广告！</p>
  </div>

// 关闭广告函数
    function closeAd() {
      document.getElementById('adBox').style.display = 'none';
    }
  </script>

</body>
</html>
```

---

### 📝 说明：

- `position: fixed`：使广告固定在视口右下角。
- `bottom: 20px; right: 20px;`：设置距离底部和右侧的距离。
- `display: none;`：初始状态隐藏广告。
- `window.onload`：页面加载完成后显示广告。
- `closeAd()`：点击关闭按钮时隐藏广告。

---

### 🚨 注意事项：

- 弹窗广告应遵守相关法律法规（如中国《互联网广告管理办法》），不能强制跳转或频繁弹出。
- 避免影响用户体验，建议添加关闭按钮和合理的时间控制（如只显示一次）。

---

如果你需要更复杂的弹窗功能（如定时关闭、动画效果等），也可以告诉我，我可以提供进阶版本。