When you see pop-overs on a lot of sites they often have a faded background behind them which helps the user focus on what’s in the pop-over and not the rest of the site. So to continue from Part 1 and Part 2 of the pop-overs tutorial I will show you how to achieve this. Again it’s fairly easy to do…

In order to achieve this we need to make additions to our HTML, CSS and Javascript.

VIEW EXAMPLE

Step 1: The HTML.

In our HTML page below our pop-over code we’ll add the following.

<div id="transBG" class="transBG"></div>

This new div will be the transparent background behind the pop-over that covers the content behind the pop-over.

Step 2: The CSS.

In our style sheet (or in the styles in the head if you placed the code there) add the following.

.transBG {
	left: 0px;
	top: 0px;
	position: absolute;
	display: none;
	background-color: #000;
	z-index: 1;
	opacity: 0.5;
	filter: alpha(opacity=60);
}

This is the CSS for our new background div. It will place the div in the top left corner of the page, make it absolute so it can go over our content, hide it, give it a black background, layer it behind our pop-over but on top of our page content, and finally make it semi-transparent.

Step 3: The Javascript.

Add 2 new functions to your Javascript file.

// SHOW BG
function showBG() {
	// SHOW THE DIV
	document.getElementById("transBG").style.display = "block";

	// SET THE DIV SIZE
	document.getElementById("transBG").style.width = myScrollWidth+"px";
	document.getElementById("transBG").style.height = myScrollHeight+"px";
}

// HIDE BG
function hideBG() {
	// HIDE THE DIV
	document.getElementById("transBG").style.display = "none";
}

The first function will show the background div then apply the sizing from our previous loadScreen() function that gets our websites size attribute (see Part 2). The second function will simply hide the background again.

Step 4: Calling the new Javascript functions.

Last but not least we have to call our two new Javascript functions from our showPopOver() and closePopOver() functions. To do this we’ll update our pop-over functions to the following.

// SHOW POP-OVER
function showPopOver(divID) {
	// LOAD THE VIEW SIZE + SCROLL POSITION
	loadScreen();

	// SHOW THE BG
	showBG();

	// SHOW THE DIV
	document.getElementById(divID).style.display = "block";

	// SET THE DIV POSITION
	document.getElementById(divID).style.left = ((myWidth / 2)-(document.getElementById(divID).offsetWidth / 2))+"px";
	document.getElementById(divID).style.top = ((myHeight / 2)-(document.getElementById(divID).offsetHeight / 2)+myScroll)+"px";
}

// CLOSE POP-OVER
function closePopOver(divID) {
	// HIDE THE BG
	hideBG();

	// HIDE THE DIV
	document.getElementById(divID).style.display = "none";
}

As you will see is all we have done is added the showBG() call to the showPopOver() function so that whenever a pop-over is shown it shows the transparent background to. We should always call it after the loadScreen() function so that all the current screen sizes are set. We have also added the hideBG() call to the closePopOver() function so it disappears when the pop-over is closed.

And there we have it, pop-overs complete with a faded background. Again it is all fully cross compatible for all modern browsers.

DOWNLOAD EXAMPLE