这个弹窗是如何出现和消失的

Question

这可能是一个基本问题，但我正处于 html、CSS 和 js 的起步阶段。

当我点击downvote时，我会看到一个弹出窗口，上面写着“投票否决需要125个声望”，这太棒了。我希望将其包含在我的网站中。我不期待一个完整的解决方案。告诉我弹出窗口在一段时间后出现和消失背后的想法。谢谢

Answer 1

您需要创建一个 HTML 元素来显示弹出消息，例如：

<div id="popUp" style="display: none;"> Popup Message </div>

然后，您需要将onclick或 jQueryclick事件附加到页面上的某个操作或 DOM 元素。因此，如果您希望用户在单击页面上的特定元素（即按钮）后看到弹出窗口。然后将click事件分配给该特定元素。

因此 JS 函数可能如下所示：

// where #element is the HTML element you want to assign the click event to
$( "#element" ).click(function() {
   $( "#popUp" ).show(); 
   setTimeout(function() {
      $( "#popUp" ).hide();
    }, 2000);
});

因此，当click事件触发时，这里会发生一些事情：间隔设置为所需的毫秒数，通过将元素的 CSS 更改display: block为show();函数内来显示元素，然后使用清除间隔clearInterval并隐藏元素。

我希望这能让你对这个概念有一个合理的了解。