Display image as popup on page load

Question

I am learning php and totally unfamiliar with javascript. but i want to know how to generate a popup having some text and image.(If it is HTML formatting allowed, it will be fine for me)

I want to generate a popup message each time page loads, like here www.000webhost.com, each time we open/refresh the home page of 000webhost.com an image is displayed. How I can do this ?

Answer 1

我建议您使用其中一个简单易用的Lightbox插件，并且只需要很少的javascript或jquery知识。

Answer 2

I'm sorry for posting on this sleeping questions...though the question sleeps, the requirement still rises :) Exactly today I wanted to do this, and i was not like wanted to use large js files to a simple popup..while searching I found colorbox plugin and digging somewhat further, I found this article which explains how to use it.

Here is the function,

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

Hope this will be helpful to someone in future..I wanted to post it here because I noticed this question is being viewed 8000+ times..So everybody is still looking for a solid solution.

Answer 3

Just create an appropriate html container with content you want to display, style it with css and add a display: none property to that. And your javascript is as simply as:

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

You should also add some ability to close it, but this is not the scope of your question. And I'm against unnecessary big UI libraries that let you create very simple modal quite simply and providing a lot more and not needed source code. It's just an overhead.

Answer 4

I always use jQuery ui popup. I have created a working example for you at http://jsfiddle.net/8kAJr/

Add any html content inside the div . For more info on jQuery ui, visit http://jqueryui.com/dialog/