Create a pop-up lightbox upon body onload

This is an example that shows a lightbox effect upon the body onLoad event. There are three JavaScript functions here which you can call to show the lightbox, which are pop_up_light_box(), pop_up_light_box_with_delay(secs) and pop_up_light_box_for_ie_only(secs). As their names imply, the first one shows a lightbox effect, second one shows a lightbox effect with specified number of seconds of delay; while the 3rd one shows a lightbox for IE browser only.

The above JavaScript functions are as follows

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 function pop_up_light_box()
  {
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
  }
 
  function pop_up_light_box_with_delay(secs)
  {
    setTimeout('pop_up_light_box()',secs*1000);
  }
 
  function pop_up_light_box_for_ie_only(secs)
  {
    var a=navigator.userAgent;
    if (a.indexOf('MSIE')!=-1){
 
        if (secs!=null) {
            pop_up_light_box_with_delay(secs);
        }
        else
            pop_up_light_box();
    }
    /**
    else
        alert ('Browser is '+a);
    */
  }

The lightbox creation using CSS was borrowed from the CSS lightbox effect from emanueleferonato.com

The complete code of the HTML page that shows a lightbox for IE browser are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
 <head>
  <title>Pop-up lightbox CSS + JavaScript example - AjaxApp.com</title>
  <style>
   body {font-family:verdana,arial;font-size:10pt;}
   .black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
  }
 
  .white_content {
		display: none;
		position: absolute;
		top: 25%;
		left: 25%;
		width: 50%;
		height: 50%;
		padding: 16px;
		border: 16px solid orange;
		background-color: white;
		z-index:1002;
		overflow: auto;
  }
  </style>
  <script type="text/javascript">
  function pop_up_light_box()
  {
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
  }
 
  function pop_up_light_box_with_delay(secs)
  {
	setTimeout('pop_up_light_box()',secs*1000);
  }
 
  function pop_up_light_box_for_ie_only(secs)
  {
	var a=navigator.userAgent;
	if (a.indexOf('MSIE')!=-1){
 
		if (secs!=null) {
			pop_up_light_box_with_delay(secs);
		}
		else
			pop_up_light_box();
	}
	/**
	else
		alert ('Browser is '+a);
	*/
  }
 
  </script>
 </head>
 <body onLoad="pop_up_light_box_for_ie_only(3);">
 <center>
 <div id="light" class="white_content">Hi, I am an happy lightbox</div>
 <div id="fade" class="black_overlay"></div>
 </center>
 </body>
 </html>

Check out the working example here (Specifically made to show on IE only). You can try to modify or add interesting effects such as delayed pop-up, slide up and down etc.

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Create a pop-up lightbox upon body onload”


  1. No Comments

Leave a Reply

You must login to post a comment.