网页上的可关闭元素

Question

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

注册示例：https://i.stack.imgur.com/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>

Answer 2

有了javascript、jquery和css，有很多方法可以完成它。作为一个新手程序员，这是我的做法：

1. 在您的网页中创建一个div 并为其提供一个 ID。
2. 在div 中，插入您想要的内容
3. 在 X 元素中，设置 onclick 以转到函数

4. 在 javascript 函数中，按 ID 名称获取该div，并将 CSS 属性显示更改为 none。如果你想变得更漂亮一点，你可以在Jquery中查找animate。它看起来有点像这样：

       $("#IDname").animate({
           'height': '0px' //change the css height to 0
       },900, function(){  //900 miliseconds duration of animation
            //something to do after animating
       });