Creative COW SIGN IN :: SPONSORS :: ABOUT US :: CONTACT US
LIBRARY: TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS FeedTraining DVDs

Full Page Overlay Window

Creative COW RSS Tutorials Feed
COW Library : Abraham Chaffin : Full Page Overlay Window
A CreativeCOW Webdesign Tutorial


Window Overlay Tutorial

Full Page Pop-up Window Overlay


In this tutorial you will learn how to create a full page pop-up window that overlays an existing html page. This technique is used often for displaying a video, movie file, picture, or form when a user clicks on an element in a web page.




Abraham ChaffinAbraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2008 CreativeCOW.net. All rights reserved.


View Example

Introduction

This technique is not a pop-up window like one might generally think. It is not a separate window of the html browser that is opened but rather a div that overlays the existing html page. The div is semi-transparent and creates a nice effect that lets the user know that they can get back to the other page by closing the window (div) that is on top.

The method behind accomplishing this is pretty straight forward:

The initial state of the div that will overlay the page is hidden with no content in it's inner html. That means initially there is nothing between the opening div tag and the closing div tag and the element has a display of none.

To initiate the display of the div you must first choose and element that a user will click on, hover over, etc. to assign the behavior to. You could even have it initiated when the page loads if you want. Generally you would have an image, button, or text that a user clicks on to initiate the javascript function.

When the div is displayed by the javascript function it is basically removing the display value of none to the display value of blank or '' which returns to the elements default value which is to be displayed. Secondly the div's inner html is filled with predefined html code that will be the code that has whatever you want to be displayed in the overlay window. In this example we will have a video inside a table that helps center the video in the center of the screen. There will also be a close button to close the window or semi-transparent pop-up div.

Clicking on the close button in the pop-up window initiates the reversal of when it was displayed. It assigns the div's display value back to none and sets the inner html back to nothing.


The CODE

To start here is the code from start to finish and then we will go over it piece by piece:




Strict Mode

This line of code is required at the very top of the document to enable strict mode in IE7. Fixed positioning is not supported in IE7 without this implemented and this tutorial will not work. Be aware also that this may not work in all browsers as fixed positioning is a newer CSS property.




CSS Styling

Let's go over the css styling of the div and see what makes it a semi-transparent div that overlays the rest of the page:



The z-index css property is used to elevate the layer in z space above all other element such as drop down menus, etc. Setting it to 10000 pretty well ensures you are going to get above most other elements that have a defined z-index.

The most difficult part is getting the semi-transparent div effect across multiple browsers. Firefox, Internet Explorer, Safari, Opera, and even Google Chrome =o Not all these browsers use the same semi-transparent css property set. IE uses it's filter settings. Mozilla Firefox has "-mox-opacity". And others use "opacity" which makes the most sense to me and hopefully will become the standard in the future.

The first line "#displaybox {" assigns the following style to the element with the displaybox id.

The next five lines are different ways to make the opacity set to 50%
" filter: alpha(opacity=50); /*older IE*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */ -moz-opacity: .50; /*older Mozilla*/ -khtml-opacity: 0.5; /*older Safari*/ opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/ "
Simply change the 5, .5 or 50 values to what you like. The example is set to 50% opacity.

"background-color:#000000;" of course makes the background color black and then the 50% transparency will make it grey.

"position:fixed;" sets the positioning to be fixed not relative or absolute in the flow of the page. This makes it so the element can jump out and float above other elements and be fixed to the window and not the page or other elements. Relative positioning puts the element in the flow of the page and is moved and moves other elements around it. Absolute floats above but is relative to the page not the window, if you used this the element would only stay at the top of the page.

"top:0px; left:0px; width:100%; height:100%;" places the semi transparent div at the top left corner and spreads it out as far as it can go across the window.

"text-align:center; vertical-align:middle;" is my beginning attempt to center the elements inside of the div to the middle of the page.


Javascript

Now let's take a look at the javascript that makes the element change when the user interacts with the page and executes the javascript function:



The first line of the function declares the function name "function clicker(){" to be used throughout the page.

"var thediv=document.getElementById('displaybox');" sets the value of "thediv" variable to the div with id of "displaybox". "thediv" variable will be used through the rest of the function so the browser doesn't have to re-get the displaybox element.

"if(thediv.style.display == "none"){" Says basically, "If right now thediv is not being displayed do what I'm about to tell you."

Make thediv visible "thediv.style.display = "";".

Drop in this html in thediv "thediv.innerHTML = "<a href='#' onclick='return clicker();'>Close Window</a>"". Inbetween the two quote marks here you would put whatever html you want to be displayed. Remember that having another quote ["] will end this tag so you should use single quotes in your html ['] or escape the ["] by using a backslash [\] in front of all quotes e.g. [\"]. You should somewhere in there have the ability to close the window again. Other wise the user will get stuck with the window on top of the page and not be able to get back.

"}else{" if the div was visible then...

"thediv.style.display = "none";" hide it

"thediv.innerHTML = '';" and set its content to nothing.

"}" end of the if else statement.

"return false;" Return false for the function. This basically makes it so that the link doesn't actually go to the destination of the href when you click on it. If you use an onclick method on a link.

"}" End of the function.


Making it Work

To make it actually work in the page you need to have the div somewhere in the page hidden at the start and something for the user to click on:

The hidden displaybox div:



A link that will execute and return the clicker javascript function onclick:



View Example

This should give you some idea of how to create this effect and also give you enough understanding to adjust, change, and manipulate it to go into your own html layout. Enjoy!
  Web Design Tutorials   •   Web Design ForumAdd Comment
Comments

cow starcow starcow starcow star
Overlay Google Map
by Anthony Scolaro on May 26, 2009
The script works well with overlaying a video but how would I go about presenting a googlemap in the same format?
Full Page Overlay Window
by Richard Williams on Feb 1, 2009
ok.. i give up... I just can not make this work...?

Lets say i want to bring up an image in my root, image.jpg.

What would the code look like for this?
Full Page Overlay Window
by Abraham Chaffin on Dec 22, 2008
I'm pretty sure fixed positioning doesn't work in IE6. As I explained in the tutorial this is only designed for progressive websites. If you are only concerned with supporting the new browser technologies.

To make this work in IE6 would require a completely different technique that is not part of this tutorial.
Full Page Overlay Window
by Andrew Scott on Dec 20, 2008
Hi
I'm having real trouble getting this to display correctly in IE6 - can you help?

Using the standard code (which works fine on all other browsers) the overlay and video appear ABOVE the page in IE6, shifting everything else down.

Some things I have tried and noted:
1) If I use Absolute positioning rather than fixed it works better, but the overlay is only as high as the movie+the "close" text and leaves the rest of the page below that exposed.
2) If I use Absolute positioning + a pixel value for height (rather than 100%) it works fine, but that's not an ideal solution as the movie might never centre properly in height depending on viewers' screen resolution.
3) Regardless of any settings I change, in IE6 the "close" text is not visible until rolled-over. It's not even black - it's just invisible.

Any help you can give would be appreciated.
Thanks
Andy

PS
Remember I asked you about the movie taking on the transparency of the background? I thought I had the wmode set to transparent but I didn't. Using this code it always happens on AppleMacs whether using Safari or Firefox. Just thought you should know. :-)
Full Page Overlay Window
by Abraham Chaffin on Nov 10, 2008
An additional tip on how to make the overlay window display a SWF file or other type of content can be found in this thread:
http://forums.creativecow.net/thread/16/856254

How to make this work with an iframe or other framed pages:
http://forums.creativecow.net/thread/16/856267

Setup multiple window popups using this method:
http://forums.creativecow.net/thread/16/856252


Related Articles / Tutorials:
Designing a Website in PhotoshopDesigning a Website in Photoshop
Adobe Photoshop Tutorial
Start Using MySQL with PHPStart Using MySQL with PHP
Web Design Tutorial
Embedding Quicktime MoviesEmbedding Quicktime Movies
Web Design Tutorial
Flash Videos for the Web Using Adobe CS3Flash Videos for the Web Using Adobe CS3
Adobe Flash Review, Tutorial
Rollovers in Adobe Dreamweaver CS3Rollovers in Adobe Dreamweaver CS3
Adobe Dreamweaver Tutorial
CSS Basics in Adobe DreamweaverCSS Basics in Adobe Dreamweaver
Adobe Dreamweaver Tutorial
Internet Killed the Video Star: The DetailsInternet Killed the Video Star: The Details
Compression techniques Feature
Introducing: Internet Killed the Video Star!Introducing: Internet Killed the Video Star!
Compression techniques Feature
Adobe Creative Suite Premium 2.3: CS The Next GenerationAdobe Creative Suite Premium 2.3: CS The Next Generation
Editorial, People / Interview
Reality ColdFusion MX: Flash MX IntegrationReality ColdFusion MX: Flash MX Integration
Review
MORE


FORUMSTUTORIALSMAGAZINETRAININGVIDEOS - REELSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

© CreativeCOW.net All rights are reserved.

[Top]