弹出的网页

Question

我有一套html网页为我的网站。除了弹出窗口以外，该网站已经完全完成，当用户访问网站的主页时应该自动加载该弹出窗口。这个弹出框会在主页中间加载，其中包含一个图片（900x400），在弹出框的左上角有一个关闭按钮。

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

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

Answer 1

你可以添加一个div与CSS 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的对话框。它可以随时显示，onclick以及onload文件。为了实现它在您的网页上，这样做：

HTML：

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

的jQuery：

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

工作demo从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>