网页上的可关闭元素

Question

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

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

后注册示例：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中查找动画。看起来有点像这样： $("#IDname").animate({‘高度’：'0px‘//将css高度更改为0 },900，函数(){ //900毫秒动画//动画后要做的事情)；