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, each time we open/refresh the home page of 000webhost an image is displayed. How I can do this ?

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., each time we open/refresh the home page of 000webhost. an image is displayed. How I can do this ?

• javascript
• php
• jquery
• html
• popup

4 Answers 4

I would remend using one of the lightbox plugins they are simple and easy to use and require minimal javascript or jquery knowledge.

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

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

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

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.