在頁面加載時將圖像顯示為彈出窗口

Question

我正在學習php，並且完全不熟悉javascript。 但是我想知道如何生成一個包含一些文本和圖像的彈出窗口。（如果允許使用HTML格式，那對我來說很好）

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

Answer 1

我建議您使用其中一個簡單易用的Lightbox插件，並且只需要很少的javascript或jquery知識。

Answer 2

我很抱歉在這個沉睡的問題上發帖...盡管這個問題一直沉迷，但要求仍然上升:)確實今天我想這樣做，我不希望將大型js文件用於簡單的彈出窗口。搜索時，我發現了colorbox插件並進行了進一步的挖掘，發現了這篇文章 ，其中解釋了如何使用它。

這是功能

 <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> 

希望這對以后的人有所幫助。.我想在這里發布，因為我注意到這個問題被查看了8000多次。.所以每個人都還在尋找一個可靠的解決方案。

Answer 3

只需使用您要顯示的內容創建一個合適的html容器，然后使用css對其進行樣式設置並為其添加display: none屬性。 而您的JavaScript就像：

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

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

Answer 4

我總是使用jQuery ui彈出窗口。 我在http://jsfiddle.net/8kAJr/為您創建了一個工作示例

在div內添加任何html內容。 有關jQuery ui的更多信息，請訪問http://jqueryui.com/dialog/