網頁彈出

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>