Javascript

Creating a JavaScript Overlay Window

This tutorial will enable the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a previous revision of my website in order to know how to do this so I thought I would make a new post on my blog to keep the knowledge going.

Now the main thing to understand is that there are extensions that will do this for you, however, I did not use these as they didn’t work…Yes that’s right, they didn’t work (due to certain JavaScript methods and where the window was being called from) so I revived the home made way.

First things first we need to create two divs, one to darken screen and one for the dialogue. I should also mention this is easy to convert into a facebook style message box if you simply make rounded corners for the divs (css can do it but only on some browsers and not many, this is how facebook do it) and making the back dark div only a little bigger than the message window (add a padding or margin).

The first two divs look like this:


<style>
.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}

.loginboxhover{
	z-index: 20;
	position:fixed;
}
</style>

<div id="darkBackgroundLayer" class="darkenBackground" style="display:none;"></div>

<div id="exitConfirm_D" class="loginboxhover" style="display:none;" align="center">
	<div id="uploadconfirmleave" style="width:712px; z-index:1;">
		 <div class="defaultContainerOuter">
	     	<h2 class="regTop" id="">Hey You! Yeah! You There!</h2>
		     <div class="defaultContainerInner" style="text-align:left; padding:0;">
			     <div style="padding-left:5px; padding-right:5px;">
				     <p>This page is attempting to redirect away from itself to another page. In order to stop my servers from exploding this action will stop any files you are currently uploading.</p>
				     <p>Are you sure you wish to navigate away from this page?</p>
			     </div>
			     <div style="background:#131313; border-top:1px solid #363636; padding:5px; padding-top:7px; color:#fff;">
				     <form action="usrcp.php?home">
					     <div align="right">
					     	<input type="submit" value="Yes, Take Me There" class="button7" style="margin-right:3px;"> Or <a id="N_RtnUP" class="normalHyp" style="cursor:pointer;">No, Take Me Back to The Uploads</a>
					     </div>
				     </form>
			     </div>
			 </div>
		</div>
	</div>
</div>

As you will notice this has been taken directly from one of my scripts. The first div is the “darkBackgroundLayer” this is the one that darkens our screen. the second is the div “exitConfirm_D” which holds a lot of code. This is the message box div. Everything within the main div is just for example reasons.

Now what we need to do is a good old hide and show:

function ShowExitConfirmPanel(){

	document.getElementById("darkBackgroundLayer").style.display = "block";
	document.getElementById("exitConfirm_D").style.display = "block";
	
	var newsletter_panel = document.getElementById("exitConfirm_D");
	
	w = 700;
	h = 346;
	
	xc = Math.round((document.body.clientWidth/2)-(w/2));
	yc = Math.round((document.body.clientHeight/2)-(h/2));
	
	var height = yc.toString();
	var temp = height.split("-");
	
	newsletter_panel.style.left = xc + "px";
	newsletter_panel.style.top = "10" + "em";

}

And hey presto! The function simply grabs the two divs by their id’s, sets their display to block (from none) and then changes the height and position of the main message box to suit my needs.

To close the message box simply use:

	function closeit(){
		document.getElementById("darkBackgroundLayer").style.display = "none";
		document.getElementById("exitConfirm_D").style.display = "none";		

	});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s