Question

我在我的网站上使用HTML创建了一个弹出窗口，用于显示在屏幕底部的警报。这是我到目前为止所做的：

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
     <p><b>ATTENTION:</b> Text Here </p>
</div>

这是一个很好的酒吧，但我无法弄清楚如何让它能够被关闭。

Answer 1

jQuery方式：
HTML：

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
    <p><b>ATTENTION:</b> Text Here </p>
    <span id="close">x</span>
</div>

JavaScript的：

<script>
  $('#close').on('click', function() {
    $('#toolbar').hide();
  })
</script>

纯JavaScript方式：

<script>
  document.getElementById("close").addEventListener("click", function(){
    document.getElementById("toolbar").style.display = 'none';
  });
</script>

你创造＆＃34; X＆＃34;在弹出窗口内，单击时，它会隐藏弹出窗口。

Answer 2

使用onclick()事件和javascript函数：

＆＃13;

function hide() {
  document.getElementById('toolbar').style.display = 'none'; //gets the element and sets display to none
}

＆＃13;

<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
         <p><b>ATTENTION:</b> Text Here </p>
  <div onclick="hide();" style="text-align: center">&times;</div>
</div>

＆＃13;

或者更容易：

<div onclick="document.getElementById('toolbar').style.display = 'none';">&times;</div>

如何让我的底部弹出栏可以关闭？

2 个答案: