以下是一个简单的用JS写的自动弹窗公告:

HTML代码:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is some sample text for the website.</p>

  <div id="popup" class="popup">
    <div class="popup-content">
      <h2>Important Announcement</h2>
      <p>This is an important announcement for our website visitors.</p>
      <button id="close">Close</button>
    </div>
  </div>
</body>

CSS代码:

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

#close {
  margin-top: 10px;
}

JS代码:

window.onload = function() {
  var popup = document.getElementById("popup");
  var close = document.getElementById("close");

  // 显示弹窗
  setTimeout(function() {
    popup.style.display = "flex";
  }, 3000);

  // 关闭弹窗
  close.onclick = function() {
    popup.style.display = "none";
  }
}

这个代码会在页面加载后等待3秒,然后显示一个弹窗公告。用户可以点击“Close”按钮来关闭弹窗。

用js写一个自动弹窗公告

原文地址: https://www.cveoy.top/t/topic/bmKE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录