javascript - 在网页上弹出

Question

我的网站有一组 html 网页。该网站已完全完成，除了弹出窗口，该弹出窗口应该在用户访问网站主页时自动加载。此弹出窗口将在主页中间加载，将包含一张图像 (900x400)，弹出窗口左上角有一个关闭按钮。

我尝试了很多资源，其中许多网络资源都需要用户单击链接才能显示弹出窗口。我不是在寻找用户单击以显示弹出窗口。我希望在用户访问主页时自​​动向用户显示弹出窗口。

有人可以帮助我解决这个问题吗？

Answer 1

您可以使用 CSS position:absolute 添加一个 div，并为其创建一个 close 按钮:

document.addEventListener('DOMContentLoaded', function() {      
  document.querySelector('a.close').addEventListener('click', function(e) {
    document.getElementById('language-popup').style.display = 'none';
  });
});

#language-popup {
  background-color: #AAAAFF;
  font-family: Verdana;
  padding: 12px;
  border-radius: 10px;
  width: 900px;
  height: 400px;
  position: absolute;
  top: 50px;
}

#language-popup h3 {
  text-align: center;
}

#language-popup ul {
  list-style-type: none;
}

#language-popup a {
  text-decoration: none;
  color: black;
}

#language-popup a:hover {
  text-decoration: underline;
}

#language-popup .close {
  float: right;
}

#language-popup .close:hover {  
  text-decoration: none;
}

#language-popup .close:after {
  content: '✖';
  cursor: pointer;
}

<div id="language-popup">  
  <a class='close'></a>
  <h3>Popup title</h3>
  <section>
    Your popup content goes here!
  </section>
</div>