javascript - 网页上的可关闭元素

Question

我想在我的文章页面中间嵌入新闻通讯注册，访问者可以关闭注册框或注册。以下是我想在我的网页上实现的另一个网站的示例:

注册示例: /image/417ti.jpg

注册后的示例: https://imgur.com/a/KfNEC

我已经有来自 ESP 的注册嵌入代码，但不确定如何创建一个可以插入 emebed 代码的可关闭元素。

Answer 1

创建一个 div，并将注册嵌入代码放入其中。然后，添加一个按钮元素以关闭注册框。向按钮添加事件监听器，以便在单击按钮时在元素上设置 display: none。

示例:

const signupContainer = document.querySelector('#signupContainer')
const closeSignup = document.querySelector('#closeSignup')
closeSignup.addEventListener('click', () => signupContainer.style.display = 'none')

.container {
  padding: 10px;
  background: #AAA;
}

.container button#closeSignup {
  background: transparent;
  border: none;
  cursor: pointer;
}

<div id="signupContainer" class="container">
  <button id="closeSignup">X</button>
  embed code here
</div>