Question

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

我尝试了很多来源，许多这些网络资源都要求用户点击链接以显示弹出窗口。我不是在寻找用户点击以显示弹出窗口。我希望用户在访问主页时自动显示弹出窗口。

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

Answer 1

您可以使用CSS div添加position:absolute，并为其创建一个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>

Answer 2

您可以使用jQuery UI Dialog。它可以随时显示，onclick以及文件的上传。要在您的网页中实现它，请执行以下操作：

<强> HTML：

<div id = "dialog">
<p>Some Content Here...</p>
</div>

<强> jQuery的：

$(document).ready(function(){
 $('#dialog').dialog();
});

从jQueryUI工作demo。

确保在标记中插入jQuery，jQueryUI和jQueryUI.CSS，方法是将这些标记放在标记中：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

在网页上弹出

2 个答案: