Question

我想在文章页面中间嵌入简报注册，访问者可以关闭注册框或注册。以下是我希望在我的网页上实施的其他网站的示例：

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

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

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

Answer 1

使用javascript和jquery以及css，您可以通过多种方式完成任务。作为一名新手程序员，我在这里是如何做到的：

在您的网页中创建一个div并为其提供ID。
在div中，插入所需内容
在X元素内，设置onclick转到函数
在你的javascript函数中，按其ID名称获取该div，并将CSS属性显示更改为none。如果你想成为一个小爱好者，你可以在Jquery中查找动画。它看起来有点像这样：
```
    $("#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>

网页上的可关闭元素

2 个答案: