网页弹出答案

【问题标题】：Popup on webpage网页弹出
【发布时间】：2015-09-29 07:08:58
【问题描述】：

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

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

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

【问题讨论】：

类似：$(document).ready( function() { /* OPEN YOUR POPUP HERE */ });?

标签： javascript jquery html css popup

【解决方案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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

除非它在页面/站点的其余部分被广泛使用，否则我认为在此处添加 jQuery 和 jQueryUI 是一个 bit 矫枉过正。在推送中，jQuery 对动画很有用，但即便如此，CSS3 也足够了 - take a look at this