javascript - 网页上的可关闭元素

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

注册示例：
https://imgur.com/a/i9Vsl

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

我已经从我的ESP中获得了一个注册嵌入代码，但是不确定如何创建可在其中插入emebed代码的closeable元素。

最佳答案

创建一个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>