网页上的可关闭元素

Question

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

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

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

我已经从我的 ESP 中获得注册嵌入代码，但不确定如何创建一个可关闭的元素以插入嵌入代码。

Answer 1

有了 javascript、jquery 和 css，您可以通过多种方式完成任务。作为一名新手程序员，我会这样做：

在您的网页中创建一个 div 并为其指定一个 ID。
在div里面插入你想要的内容
在X元素里面，设置onclick去一个函数
在您的 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
    });
```

Answer 2

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

网页上的可关闭元素

Closeable element on a webpage

html

javascript

css

webpage