In this tutorial I will explain you how to create a pop-up screen that automatically shows up on a website.
The first thing you need to do is download the shadowbox script. Just copy the files in your host directory. Make sure you copy all the files in the root direction of your webhost example: http://www.yoursite.com/shadowbox.js.
When you go to your site index page. Post the following code in the header:
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
modal:‘true’,
language: ‘en’,
players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’]
});
window.onload = function(){
if( document.cookie && !/(^|\s|;)shownDiv=true(;|$)/.test( document.cookie ))
{
document.cookie = ‘shownDiv=true’;
Shadowbox.open({
content: ‘url to your pop-up page’,
player: "iframe",
height: 355,
width: 650
});
}
};
</script>
Let me explain this code..
Adding this code in the header will automatically enable the shadowbox on the website.
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let’s skip the automatic setup because we don’t have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: ‘url of pop-up window’,
player: "iframe",
title: "Welcome",
height: 350,
width: 350
});
};
</script>
Put here the full website url of the page you wanne show in the lightbox. You can also change the width and height of the pop up window…
height: 350,
width: 350
When adding only this code the pop-up frame will always show up on the page. We only wan’t this to happen once. The following code will enable the lightbox once a day to every unique browser and computer.
after…
});
add an extra
If you don’t wan’t visitors to click on the outside of the shadowbox insert the code under this right above the ‘language:’ code in the header.
Valuable info. Lucky me I found your site by accident, I bookmarked it.
I can’t seem to get this to work, It seems straight forward enough, how long ago was this written ? and can you assist me in getting this to work. Does this work on Firefox and safari ? Thank you in advance.
@ Chris
this information is not so long written, and I know this works because I tested it not so long ago.
Just install shadowbox on your webserver, add the first code you see on this page in the header of your page (make sure the shadowbox files are the same like the links you see in the code). Create a simple html file. Put the design of your page in it and save the page. Then look into the header code and change ‘url to your pop-up page’ into the url of your page. see here an example page: http://www.scansourcehealthcare.eu I will update my posts and comments style asap, still working on the layout. Thanks
Small update on the page, new code highlighted! Hope this will be more clearly.
Nice brief and this post helped me alot in my college assignement. Gratefulness you seeking your information.
Just want to say what a great blog you got here!
I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!
Thumbs up, and keep it going!
Cheers
Christian, watch south park online
How to create a lightbox popup welcome message You re so random best post. I has been collection in my blog. 2010/08/08