网页弹出

Question

我的网站有一套html网页。 该网站已完全完成，除了弹出窗口外，该弹出窗口应该在用户访问网站主页时自动加载。 该弹出窗口将加载到首页的中间，其中将包含一个图片（900x400），并在弹出窗口的左上方显示一个关闭按钮。

我尝试了许多资源，其中许多Web资源都要求用户单击链接以显示弹出窗口。 我不是要用户单击以显示弹出窗口。 我希望用户访问主页时自​​动向其显示弹出窗口。

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

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> 

Answer 2

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

HTML：

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

jQuery的：

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

jQueryUI的工作演示 。

通过将以下标记放置在标记中，确保在标记中插入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>