彈出頁面加載時顯示圖像

Question

我正在學習php，完全不熟悉javascript。但我想知道如何生成一個文本和圖像彈出（如果它是HTML格式允許，這將是我的罰款）

我想生成一個彈出消息每次頁面加載，像這裏www .000webhost.com， 每次我們打開/刷新000webhost.com的主頁時，都會顯示圖像。 我該怎麼做？

Answer 1

只需創建一個合適的HTML容器，其中包含要顯示的內容，使用CSS對其進行樣式設置，然後爲其添加一個display: none屬性。和你的JavaScript是一樣簡單：

document.addEventListener('DOMContentLoaded', function(){ 
    var popup = document.querySelectorAll('[your element selector]')[0]; 
    popup.style.display = 'block'; 
}, false); 

你還應該添加一些能力來關閉它，但這不是你的問題的範圍。我反對不必要的大型UI庫，它可以讓您非常簡單地創建非常簡單的模式，並提供更多且不需要的源代碼。這只是一個開銷。

Answer 2

我會推薦使用其中一個lightbox插件，它們很簡單，易於使用，並且需要極少的JavaScript或jQuery知識。

Answer 3

我總是用jQuery ui彈出。我在http://jsfiddle.net/8kAJr/

中爲div添加了任何html內容。欲瞭解更多關於jQuery ui的信息，請訪問http://jqueryui.com/dialog/

Answer 4

我很抱歉在這個睡眠問題上發帖...雖然問題仍然存在，但需求依然上升:)今天我確實想要這樣做，而且我不喜歡想要使用大的js文件到一個簡單的彈出窗口..在搜索時發現了colorbox插件並進一步挖掘，我發現this article解釋瞭如何使用它。

下面是函數，

<link href="popup/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $.fn.colorbox({href:"popup/popup_image.jpg", open:true}); 
}); 
</script> 

希望這將有助於有人在future..I想它張貼在這裏，因爲我注意到這個問題，正在觀看8000+ times..So大家仍尋找一個堅實的解決方案。