 |
|
 |
| FORUMS | TUTORIALS | MAGAZINE | STOCKYARD | VIDEOS | PODCASTS | EVENTS | SERVICES | NEWSLETTER | NEWS | BLOGS |
|
Full Page Overlay Window
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.
View Example IntroductionThis 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 CODETo start here is the code from start to finish and then we will go over it piece by piece:Strict ModeThis 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 StylingLet'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. JavascriptNow 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 WorkTo 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!
Comments •
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Reply
Like
FORUMS • TUTORIALS • MAGAZINE • STOCKYARD • VIDEOS • PODCASTS • EVENTS • SERVICES • NEWSLETTER • NEWS • BLOGS
[Top]
