Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
LIBRARY:TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS Feed

Full Page Overlay Window

COW Library : Web Design Tutorials : Abraham Chaffin : Full Page Overlay Window
Share on Facebook
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!
  View 71 Comment(s)

  Web Design Tutorials   •   Web Design Forum
Reply   Like  
Share on Facebook
Comments

Re: Full Page Overlay Window
by Rene Yu
HiAbraham,

I find your post so helpful!

Can you also assist me on how to insert the code below:



googletag.cmd.push(function() { googletag.display('div-gpt-ad-1400476661721-0'); });





I tried doing this with no luck.


#displaybox {
z-index: 10000;
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}



function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "


googletag.cmd.push(function() { googletag.display('div-gpt-ad-1400476661721-0'); });

CLOSE WINDOW";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}




Appreciate you help.

Thanks,
Rene
Re: Full Page Overlay Window
by Daniel Chow
Hi Abraham,

I'm a beginner of javascript and found your above code VERY helpful!! I was trying to set up multiple overlay window on same page. For example, on my web page, I will have a link to image 1, a link to image 2 and a link to image 3. When visitor click on the link to image 1, it will popup a overlay window for image 1. When visitor click on the link to image 2, it will popup a overlay window for a different image (image 2). Do you know how to do that? Right now, by using your code, I can only have a overlay window to the same image.

Thanks so much in advance for your help. I really appreciate this!!:)
Re: Full Page Overlay Window
by Jason Romine
Hello, Thank you for the code.

The Issue I am having is that anything (text, images) I put into the overlay come out as opaque. I notice in your example your CLOSE WINDOW is also opaque. Please advise how to make the items stand out ontop of the opaque. Thanks, Jason
Re: Full Page Overlay Window
by balwinder singh
Hi,
I need your help to open a new popup page while closing exiting main page with any message.
Re: Full Page Overlay Window
by Gonzalo Aranibar
Hi Abraham.. please, can you help me figure out a way to make the overlay automatic.
As soon as the page loads, the overlay window comes up.
thanks for the help!
@Full Page Overlay Window
by Gregory Samsung
Hi, I'm new to this but find it very interesting. Can you show me how to make an example of an overlay that just includes text? Thank you, GS
Re: Full Page Overlay Window
by Rohit Kesarkar
hello sir
This is my code:

clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "

<object width="640" height="500">
<param name="bgcolor" value="#000000" />
</object>

<b>BattleZone...!<i>
A debate in which the participants will discuss for or against the given topic, which will be given on the spot.No. of participants per team : 2 Participants</b></i>
<a href="#">CLOSE WINDOW</a> ";

I wanna know how to add a image onto my overlay,just below the h1 tag.also i wanna know how to change the color and size of the font.

-Rohit
@Full Page Overlay Window
by Levi Hemphill
Hi,

I appreciate the code. The only difference is I want to use an image for the background instead of just transparant gray fill. I know I have to remove background-color and insert background: url but i am not sure how to write it.

Levi
Re: Full Page Overlay Window
by Amy Hartman
Hi Abraham, thanks so much for this great code, and thanks in advance for any tips.

I am trying to do this within a self-hosted Wordpress site (http://frenchmarket-cafe.com/frenchmarket2/) if you click on the gray circle image with a mobile phone in it at the upper right, you will see that the overlay is placed at the top of the webpage and if you scroll down the rest of the website is still there, instead of overlaying on top of it. Any ideas what I'm doing wrong?

Thanks again!
Re: Full Page Overlay Window
by Beth Kaufer
Sorry it does not look like the screen shots attached.
This is the script in the head tag


function clicker(embedCode){
var thediv=document.getElementById('displaybox');
if(typeof embedCode !== "undefined"){
thediv.style.display = "";
thediv.innerHTML = "
"+embedCode+"«backName<!-- end .videoPlayer -->
";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}

-BK
Re: Full Page Overlay Window
by Beth Kaufer
Hi Abraham
Thank you for this tutorial. It is great. I am trying to have multiple image links on a page open different movies in the overlay. I had it working from your example using iframes. When I try to replace it with the video tag it does not work. Can you tell me what I am doing wrong?

I have attached screen shots of the code. When I tried to paste the code into the post it would change.

Thanks

-BK
+1
@Beth Kaufer
by Beth Kaufer
Here are the screen shots





-BK
Re: Full Page Overlay Window
by Erika Liza Vergara
Hi,
Great work indeed. If possible I would need your help in my case. I wanted to use that overlay to contain my login form, it has needs a javascript though to make it check if the user has inputted an email address and a password (required fields) before it submits. But when I add the tags inside the innerhtml, it doesn't work.

Also, would it be possible for it to process the form inside? like if I press submit and the email add and password did not match, it will give me an error message, otherwise it would close the overlay and reload my main page with the user already logged in.

I am sorry, I know I am asking for too much but any help will be very appreciated :)
@Erika Liza Vergara
by Abraham Chaffin
Hello Erika,

Yes, you can add anything you want as the content of the box. Simply replace the video code with your form HTML code and use the same rules as mentioned in other place. i.e. Escape quotes and avoid new lines in the Javascript code. You can then use the onSubmit event parameter in the form to handle your field checking.

Abraham
@Abraham Chaffin
by Erika Liza Vergara
Hey, thanks for the very quick response.

I don't know if i should put the inside my innerhtml or just leave it outside along with the clicker function?

I think something is wrong with my form too? Because even when I remove the onSubmit tag and just let it submit without checking, it doesn't move submit and doesn't move as well.

thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><table width='280' height='300' style='background:#000000;-moz-border-radius: 7px;-webkit-border-radius: 7px;' align='center' cellpadding='5' cellspacing='0'><tr><td width='10%'></td><td align='right'><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr><form method='post' action='Login.php'><tr><td width='10%'></td><td style='color:#ffffff'>Email<br /><input type='text' name='userEmail' class='input' size='22' /></td></tr><tr><td width='10%'></td><td style='color:#ffffff'>Password<br><input type='password' name='userPass' class='input' size='22' /></td></tr><tr><td width='10%'></td><td align='right'><input type='submit' name='submit' id='submit' value='Submit' /></td></tr><tr><td width='10%'></td><td><a href='ForgotPassword.php'><b>Forgot Password</b></a></td></tr></form></table></td></tr></table>";

Another thing, could I put php codes inside the innerhtml such that it reads the database and check if the email address and password matched with a customer entry?
Re: Full Page Overlay Window
by Stuart Jankelovitz
This code is awesome. Very easy to use. I do have a question.... is there a way to make it so that when the video/audio file is done playing, the code automatically closes the page? I would like to have it return to the main index page once the video I am using is done. Any help would be greatly appreciated. Thanks!
@Stuart Jankelovitz
by Abraham Chaffin
Hello Stuart,

To do this you would need what is called a "callback function" from the player. Some players execute a Javascript callback function when various events happen, such as when a player ends. You could then place Javascript code within that function that would close the window. Whatever player you are using should provide documentation on harnessing supported callbacks.

I haven't done this but here's what I found for YouTube:
https://developers.google.com/youtube/js_api_reference#SubscribingEvents

If you read that page and learn a bit of Javascript you should be able to do it.

Abraham
Re: Full Page Overlay Window
by Ian Anderson
Hello Abraham,
I would like to first thank you for your code, it worked great. Unfortunately I have attempted to add onto it and have since caused it to no longer work. I am hosting my own videos and I would like the user to be able to choose one of the videos and have it be sent thru to this player. I am pulling down using php from my mysql the information pertaining to media width and height, media being a string like /movies/playme.mov and width and height being a number. I am trying to pass this into the player with no avail. I am thinking is something very simple. Any help would be greatly appreciated.

Ian Anderson

function clicker(media, width, height){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'>
<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='width' height='height'>
<param name='src' value='media'>
<param name='bgcolor' value='#000000'>
<embed src='media' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='height' width='width' bgcolor='#000000'>
</embed>
</object>
<br>
<a href='#' onclick='return clicker();'>Close Window-Return</a>
</td>
</tr>
</table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
<?php
$query = "SELECT * FROM ".$commercialsnationaltv." ORDER BY sortOrder ASC";
$results = mysql_query($query);
if (!$results) die ("Database access failed: " . mysql_error());
$numRows = mysql_num_rows($results); //Number of rows/records

for($i=0;$i<$numRows;$i++) {
$thumb = mysql_result($results,$i,"thumb");
$media = mysql_result($results,$i,"media"); //relative path to media
$width = mysql_result($results,$i,"width");
$height = mysql_result($results,$i,"height");
$longname = mysql_result($results,$i,"longName");
$shortname = mysql_result($results,$i,"shortName");
?>

<a href='#' onclick='return clicker({<?=$media;?>}, <?=$width;?>, <?=$height;?>);'><img src="<?=$thumb;?>"></a>
<?
@Ian Anderson
by Abraham Chaffin
I think your issue is on this line:

<a href='#' onclick='return clicker({<?=$media;?>}, <?=$width;?>, <?=$height;?>);'><img src="<?=$thumb;?>"></a> <?

Looks like the javascript function is going to use strings and you're passing in an object and integers. Put quote marks around your variables so they become strings.

onclick='return clicker("<?=$media;?>","<?=$width;?>","<?=$height;?>");'

not

onclick='return clicker({<?=$media;?>}, <?=$width;?>, <?=$height;?>);'

In your javascript function there is also a problem with bringing in your variables

<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='width' height='height'>

should be

<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='"+width+"' height='"+height+"'>

And your string is going to have trouble

thediv.innerHTML = "
whatever
";


Newlines don't work like that for strings in Javascript.
You need to have the string on one line.

Should be:
thediv.innerHTML = "\nwhatever\n";

Abraham
Re: Full Page Overlay Window
by Ian Anderson
Hello Abraham,
I would like to first thank you for your code, it worked great. Unfortunately I have attempted to add onto it and have since caused it to no longer work. I am hosting my own videos and I would like the user to be able to choose one of the videos and have it be sent thru to this player. I am pulling down using php from my mysql the information pertaining to media width and height, media being a string like /movies/playme.mov and width and height being a number. I am trying to pass this into the player with no avail. I am thinking is something very simple. Any help would be greatly appreciated.

Ian Anderson

function clicker(media, width, height){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'>
<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='width' height='height'>
<param name='src' value='media'>
<param name='bgcolor' value='#000000'>
<embed src='media' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='height' width='width' bgcolor='#000000'>
</embed>
</object>
<br>
<a href='#' onclick='return clicker();'>Close Window-Return</a>
</td>
</tr>
</table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
<?php
$query = "SELECT * FROM ".$commercialsnationaltv." ORDER BY sortOrder ASC";
$results = mysql_query($query);
if (!$results) die ("Database access failed: " . mysql_error());
$numRows = mysql_num_rows($results); //Number of rows/records

for($i=0;$i<$numRows;$i++) {
$thumb = mysql_result($results,$i,"thumb");
$media = mysql_result($results,$i,"media"); //relative path to media
$width = mysql_result($results,$i,"width");
$height = mysql_result($results,$i,"height");
$longname = mysql_result($results,$i,"longName");
$shortname = mysql_result($results,$i,"shortName");
?>

<a href='#' onclick='return clicker({<?=$media;?>}, <?=$width;?>, <?=$height;?>);'><img src="<?=$thumb;?>"></a>
<?
Re: Full Page Overlay Window
by Sally Hutchins
I am very close to getting my overlay working, but the html file with image that I want to be 100% opacity is still taking on the 90% opacity. Here is a link to my page with overlay http://www.nleomf.org/memorial-fund-home.html.

Here is the code I'm using. I'd greatly appreciate any help to get this to display correctly. Thanks!


#displaybox {
z-index: 10000;
filter: alpha(opacity=90); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /*older Mozilla*/
-khtml-opacity: 0.9; /*older Safari*/
opacity: .9; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; text-align:center; vertical-align:middle; font-color:#ffffff; font-size: x-large; align:middle; border:0;
}


function clicker(){
var thediv=document.getElementById('displaybox');
var embedCode='<iframe width="427" height="377" src="http://support.nleomf.org/site/PageNavigator/NPW_2012_popup.html" frameborder="0" allowfullscreen="no"></iframe>';
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = ""+embedCode+"<a>CLOSE WINDOW</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
@Sally Hutchin
by Abraham Chaffin
Hello Sally,

Try using the CSS property


background-color: rgba(0,0,0,0.9);


rather than setting the opacity with


filter: alpha(opacity=90); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /*older Mozilla*/
-khtml-opacity: 0.9; /*older Safari*/
opacity: .9; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;


Abraham
@Abraham Chaffin
by Sally Hutchins
That worked! I changed it to 60% opacity instead of 90% and it worked great! Thanks so much! Now I will change the CLOSE WINDOW text to white so it shows up better and I'm set. Thanks, again!
@Abraham Chaffin
by Sally Hutchins
On last question. I am trying to have the CLOSE WINDOW link text to be white or have a white background around the text. How do I do that? All I can seem to do is change the size and bold it. Thanks!
@Sally Hutchin
by Abraham Chaffin
To change the font color:
You can use the html font tag
http://www.w3schools.com/html/html_fonts.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_color
or you could use the css color property
http://www.w3schools.com/cssref/pr_text_color.asp

To change the background color use the background-color css propery:
http://www.w3schools.com/cssref/pr_background-color.asp

Abraham
@Abraham Chaffin
by Sally Hutchins
When I put in html tags (other than <b>) the overlay doesn't work. This is the code I put in.

CLOSE WINDOW

Since CLOSE WINDOW is a link, is that having an effect?
@Sally Hutchin
by Abraham Chaffin
You can use styling on the link/anchor tag like
<a href='#' onclick='return clicker();' style='font-weight:bold;color:white;'>CLOSE WINDOW</a>

Abraham
@Abraham Chaffin
by Sally Hutchins
This is perfect - thanks so much!
@Abraham Chaffin
by Sally Hutchins
Is there a simple line of code that enables cookies so that the overlay only shows up the first time the person goes to the page?
cant attach it to my frontpage
by Mohammed Salah
hi ,
thanks for this great help , it worked with me at one html page
but i have problem
im working on joomla 1.5 (cms) and want to add this code to my homepage , im not an expert so i dont know how to attach it to my website
can u please help me ?
Ralph Metcalf
by Ralph Metcalf
Cheers for the reply and the tutorial, here is the code im using for the finished result. Just i case some would like to do a similar thing. :)


<!DOCTYPE HTML>



Pop Up Test

function clicker(){ var thediv=document.getElementById('displaybox'); var embedCode=''; if(thediv.style.display == "none"){ thediv.style.display = ""; thediv.innerHTML = ""+embedCode+"<a>CLOSE WINDOW</a>"; }else{ thediv.style.display = "none"; thediv.innerHTML = ''; } return false; }




<div style="style">







Your browser does not support the video tag.



<a>CLOSE WINDOW</a>




</div>


Re: Intregrate Html5 video tag?
by Ralph Metcalf
Hey Abraham great work really simple i am just wondering if and how you could integrate a Htlm5 video tag like this.






Any help would be most appreciated.
@Ralph Metcalf
by Abraham Chaffin
Hello Ralph,

An HTML5 Video tag would operate much like any of the other HTML content in these examples.

Just replace the iframe HTML content in this example with your HTML5 Video tag content
http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.p...

Abraham
Re: Full Page Overlay Window
by Raghav Duseja
Thank you very much. It worked wonderfully.
Re: Full Page Overlay Window
by Raghav Duseja
Thank you for your reply. Sorry, I seem to have wanted to put links in that pop up window, actually I wanted an arrangement in which different links on my website open in the same way i.e. they pop up in a page overlay, but have different embedded videos. How would such an arrangement be possible?
Extremely grateful for your benevolent service.

I tried the youtube playlist option using a single link but it doesn't really appeal to me.
@Raghav Duseja
by Abraham Chaffin
To have multiple links on your page to open different videos you could modify the clicker function similarly to this:

<script type="text/javascript">
function clicker(embedCode){
var thediv=document.getElementById('displaybox');
if(typeof embedCode !== "undefined"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'>"+embedCode+"<br/><br/><a href='javascript:void(0);' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>


Then call the function with whatever you wanted to show up in the pop up box.




<a href='javascript:void(0);' onClick="clicker('<iframe width=\x22560\x22 height=\x22315\x22 src=\x22//www.youtube.com/embed/YVt4q4XVZjw\x22 frameborder=\x220\x22 allowfullscreen></iframe>');">This</a>

or

<a href='javascript:void(0);' onClick="clicker('<iframe width=\x22560\x22 height=\x22315\x22 src=\x22//www.youtube.com/embed/y3DykmDoWLg\x22 frameborder=\x220\x22 allowfullscreen></iframe>');">That</a>


<div id='displaybox' style="display:none;"></div>




I would also use rgba for the background color as it is now supported in most modern browsers. This has better results then the previous method.


<style type='text/css'>
#displaybox {
z-index: 10000;
background-color: rgba(0,0,0,0.5);
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>


Abraham
Escaping Quotes in onClick
by Abraham Chaffin
Forgot to mention. You might have noticed that I replaced the double quotes with their hex equivalent since escaping quote marks or double quote marks in an onClick event doesn't really work.

" (double quote)
becomes
\x22

' (single quote)
becomes
\x27


Abraham
Re: Full Page Overlay Window
by Raghav Duseja
Just wanted to know if and how this can be used for multiple video youtube links which open in this same way.
Thank you.
@Raghav Duseja
by Abraham Chaffin
Yes, you can put any HTML you want into the "thediv.innerHTML" parameter and change what is in the popup window. See this comment which gives a little bit more of an example:

http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.p...

You can use a playlist embed code if you want as well.

Abraham
@Full Page Overlay Window
by Lisa Trevino
I am trying to switch out my intro page where someone needs to agree to terms before they are allowed to be on the site, to an overlay similar to this. I don't know enough to do this myself. Where could I hire someone to do this for me? If you are willing to do this, Abraham, will you please respond?
Re: Full Page Overlay Window
by marc white
Great!
i want to know (sorry for my english) if it can replace the video with an image.
thanks :)
@Full Page Overlay Window
by Tony Familia
Great post, Abraham. This is very helpful. I am using the code and have altered it to be a full page popover that loads immediately. I'd like it to load after 5 seconds and then not load again. Is that possible?

Thanks again!
@Tony Familia
by Abraham Chaffin
Hello Tony,

You would use setTimeout to do this:

e.g.:

<body onLoad="setTimeout('clicker()',5000);">


Abraham
@Abraham Chaffin
by Tony Familia
Great! That was the last piece of code I needed to rule the world! Thanks, Abraham.
@Abraham Chaffin
by Tony Familia
Hello Abraham,

Well, my comment about ruling the world turned out to be a tad premature.

I have been working with the code on and off for the past week and everything is working perfectly (http://canineclubacademy.com/index.html). The only thing I am still trying to figure out is how to make the popover load only one time each browser session. Right now it comes up every time you go back to the home page. Is that possible? Thanks again!

-Tony
@Tony Familia
by Abraham Chaffin
Hello Tony,

I would suggest trying to use cookies to solve this problem. Check for the cookie. If it exists skip the loading of the overlay. If not, set a cookie.
http://www.w3schools.com/js/js_cookies.asp

Abraham
@Abraham Chaffin
by Tony Familia
Hello Abraham,

Well... I read the link you posted (http://www.w3schools.com/js/js_cookies.asp) and I've been tinkering with it for about a week, but I just can't figure out the cookie thing to make the popover only load once per browsing session.

Is there an easier tutorial that you could point me to maybe? Sorry to bug you. This is the last thing I need to have everything figured out exactly how it needs to be.

Gobble gobble!

-Tony
Re: Full Page Overlay Window
by Julius Agung
I've been tried to modify the Js function as bellow, but an error is occurred. I thought it should be worked well. I don't know what should I do. Could you help me please...


function clicker(param){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = ""+ param +"<a href="#">CLOSE WINDOW</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}

<a href="#">Show PopUp</a>
@Julius Agung
by Abraham Chaffin
It looks like you are using double quotes inside of double quotes which won't work. You either need to escape the double quotes or use single quotes.

thediv.innerHTML = ""+ param +"<a href="#">CLOSE WINDOW</a>";

Should be:

thediv.innerHTML = param +"<a href='#'>CLOSE WINDOW</a>";

or

thediv.innerHTML = param +"<a href=\"#\">CLOSE WINDOW</a>";

Abraham
Re: Full Page Overlay Window
by Raj Mani
Thanks for the code and it works great. I would like to replace the text "CLOSE WINDOW" with a small graphic and place the graphic on the top right of my graphic.

Appreciate if you can help.

Thanks
Raj
@Raj Mani
by Abraham Chaffin
If you find and Replace "CLOSE WINDOW" with the image code that should give you what you're looking for.

e.g.
<img src='http://www.creativecow.net/favicon.ico' width=16 height=16 />
http://www.w3schools.com/tags/tag_img.asp

Abraham
Re: Full Page Overlay Window
by Sally Hutchins
Could you show me the code to show a YouTube video instead of your video? Also, I would like the full page overlay window to load when the page loads, not have to click on a link to load it. It would be great if you could show me the revised code. Thanks!
@Sally Hutchins
by Abraham Chaffin
Hello Sally,

Here's the way you would set that up:

Body onLoad Trigger:

<body onLoad="clicker();">


YouTube Embed Code

<script type="text/javascript">
function clicker(){
var thediv=document.getElementById('displaybox');
var embedCode='<iframe width="420" height="345" src="http://www.youtube.com/embed/dMH0bHeiRNg" frameborder="0" allowfullscreen></iframe>';
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'>"+embedCode+"<br/><br/><a href='javascript:void(0);' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>


Video Holder:

<div id='displaybox' style="display:none;"></div>


Abraham
@Abraham Chaffin
by Sally Hutchins
Thank you so much for responding! I added the revised code to the head of my page and placed the video holder code within the body of my page, but the overlay page still isn't coming up. Here is my page.

http://www.nleomf.org/memorial-fund-home-1.html.
@Abraham Chaffin
by Sally Hutchins
It worked - thanks!!!!
Re: Full Page Overlay Window
by Scott Hart
OK, so my question is:
I have several object I wan to overlay over other portions of the HTML, one being an image frame for pictures (PNG, with 100% opacity border, and total transparency in the middle, with the image itself behind it), one being a graphic navigation wheel I designed, and then there is another image viewer for a slide show.
Am I crazy? I have looked all over for how to make this happen, it seems pretty simple to me, but perhaps it is way more complex than I realized. Thanks.
Re: Full Page Overlay Window
by Stephane Page
I tried the code but I'm not sure what I'm doing wrong. I tried many different ways.

When I paste your code, you video show up. But when I change your video by mine (Youtube embed) it won't work.

Also, I don't want the same video playing. At the bottom of my website I have 3 videos I want people to click on. How can they play each one of those videos?

This is my website, you can look at the code:
http://firstclasspartner.com/index2.html

Thank you for your help.
Re: Full Page Overlay Window
by Partha Misra
Hi!Abraham

Thanx for creating such a gr8 code.I am trying to use the code on my blog.I have a thumbnail image which i have linked it to my flickr slideshow.So basically when you click on the image an overlay window opens up showing my flickr gallery.

But my problem is that the flickr gallery which is an takes up the opacity values of the displaybox.I want to alter the opacity values of only the so that it can stand out distinctly on the overlay window.

the code is as follows:

thediv.innerHTML =<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><iframe align='center' src='http://www.flickr.com/slideShow/index.gne?group_id=&user_id=&set_id=72157622816888274&tags=Cars,Lotus,Exige' frameBorder='10' width='500' height='500' scrolling='no' opacity:1></iframe><br/><small>Created with <a href='http://www.admarket.se' title='Admarket.se'>Admarket's</a> <a href='http://flickrslidr.com' title='flickrSLiDR'>flickrSLiDR</a>.</small><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>


Please help me in fixing this issue.


Parth
@Partha Misra
by Abraham Chaffin
You could create an inner box with a higher opacity if the inner child elements are taking the css properties of the parent.


#innerbox {
z-index: 10001;
filter: alpha(opacity=100); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
-moz-opacity: 1.00; /*older Mozilla*/
-khtml-opacity: 1.0; /*older Safari*/
opacity: 1.0; /*supported by current Mozilla, Safari, and Opera*/
}


Abraham
@Abraham Chaffin
by Partha Misra
Thanx Abraham for your swift response.

So basically the CSS you have said goes down under the displaybox css and where shall we call the innerbox CSS in the script like you did in


var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){

thediv.style.display = "";



if you could tell me the entire code i will be really grateful to you.


@Partha Misra
by Abraham Chaffin
Truth be told - This method (for me) is out dated. I no longer use this method to do overlays.

Check out this post:
http://forums.creativecow.net/readpost/16/857434

Grab the code there and play with it. It should be a much more effective method and won't have the transparency problems that this method has.

Abraham
oke, nice tutorial! i got this
by Mattias Molen
oke,

nice tutorial! i got this thing working but now i want to embed vimeo video's inside this player. is this posible? copy paste the vimeo url doesn't work.

thanks.
thanks alot Abraham, once again i
by Richard Williams
thanks alot Abraham, once again i bow down to your supremity
Hello Richard, To do this you
by Abraham Chaffin
Hello Richard,

To do this you need to make the absolutely positioned div html inside of the same form tags as the other form content your dealing with. It is possible to have the form tag just inside the body tag to include all the content on the page. You'd only be able to have one form on the page but it would encompass everything no matter how they are positioned.
Ive sussed it
by Richard Williams
Ive got this licked now, i dont know what i was doing wrong last year, but ive got it working now. :o)

Quick question, if you pick this up, I want to have form details on the front page, and then more form details on the displayed div, How do you think i could submit both lots of content on submit?

Dynamic loading
by John Jordan
Hi is there any way of easy loading different content in the overlay say for example someone clicks an image and the overlay shows a larger version of that same image then the user returns to the page and clicks another image and it then loads a that image?

thanks
John
Overlay Google Map
by Anthony Scolaro
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
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
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
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
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:
Web Design
Simple CSS Centered Layout

Simple CSS Centered Layout

This tutorial from CreativeCOW leader, Fernando Mol explains the principles of how to create an horizontally centered layout using HTML and CSS.

Tutorial
Web Design
Start Using MySQL with PHPStart Using MySQL with PHP

Learn about MySQL and how to implement its functionality into your web site allowing you to create dynamic content built from databases. In this tutorial you will learn some basics of using MySQL, PHPMyAdmin, Database Management Systems, and how to display MySQL content in a web page.

Tutorial
Web Design
Embedding Quicktime MoviesEmbedding Quicktime Movies

Learn the basics and advanced methods of embedding Quicktime Movies into your web site, blog or any html page. Find out what it takes to maintain cross platform compatibility when publishing all your Quicktime Videos. A more advanced technique of using Dreamweaver CS3 to embed your movie using ActiveX javascript embedding is also discussed.

Tutorial
Web Design
Reality ColdFusion MX: Flash MX Integration

Reality ColdFusion MX: Flash MX Integration

Author/Web developer Michael Hurwicz examines Reality ColdFusion MX: Flash MX Integration by Ben Forta, Randy Drisgill, Dennis Baldwin, Matt Tatam, and Derek Lu. This book is published by Macromedia press. The book discusses goals, logic and development process behind four projects, for which full source code is available on-line. A great way to get a jump start on ColdFusion/Flash integration. Recommended for intermediate Flash and ColdFusion users -- not for beginners.

Review
Web Design
Mike Gondek reviews Total Training's LiveMotion2

Mike Gondek reviews Total Training's LiveMotion2

CreativeCOW leader, Mike Gondek examines a 3 DVD training series called Live Motion 2.0 by Steve Holmes and published by Total Training.

Review
Web Design
Controling Adobe GoLive using Hot-Key settings

Controling Adobe GoLive using Hot-Key settings

In this article, Ron Lindeboom shows newer and other GoLive users how to make GoLive act the way you want it to. Have you ever wished you could set the hot-key short-cuts the way you wanted instead of the way that the Adobe engineers set them? Well you can do it and it's very easy to do. Here's how...

Tutorial
Recent Articles / Tutorials:
Crowdfunding
AIRDOG: A HOT KICKSTARTER FOR A COOL IDEA

AIRDOG: A HOT KICKSTARTER FOR A COOL IDEA

An auto-follow, gyro-stabilized GoPro drone that goes where you go, including skydiving and surfing, that you can operate hands-free -- sounds cool, right? It's called AirDog, and whether or not the product is for you, you can learn a lot from their very hot Kickstarter campaign: they reached their $200,000 goal in 4 days, on their way to over $1.3 million pledged.

Editorial, Feature, People / Interview
Blackmagic Cinema Camera
Shooting Trent & Isabella: Blackmagic Firmware & Indie Film

Shooting Trent & Isabella: Blackmagic Firmware & Indie Film

Paul Del Vecchio is a filmmaker with an independent spirit. When he had the chance to beta test Blackmagic's new firmware on the Cinema Camera while serving as director of photography on the indie film "Trent & Isabella," he found that the new debayer process became a huge asset to getting the raw-like images he wanted without the price of storage and processing. Less time and money spent there means more focus on the film's visual style which ranges from spaghetti western to film noir.

Editorial, Feature, People / Interview
Adobe Premiere Pro
Cooking With Premiere Pro CC on PBS's America's Test Kitchen

Cooking With Premiere Pro CC on PBS's America's Test Kitchen

As America's Test Kitchen enters its 15th season on PBS, they've made the switch to Premiere Pro Creative Cloud. Post-production Supervisor and director Herb Sevush has been with the show from the beginning, and confessed some trepidation moving away from FCP 7, but has found it to be a great fit for their data-intensive, increasingly 4K multicam production, and his work with remote editors. Here, Herb offers some insights into both the why and the how of their switch, with special attention to Premiere Pro CC's approach to multicam.

Editorial, Feature
Crowdfunding
Expert Tips for Crowdfunding Success

Expert Tips for Crowdfunding Success

Film projects are the most unsuccessfully funded of any Kickstarter category -- but producer and crowdfunding consultant Diana Ward Roark has worked on a number of campaigns for independent films that have exceeded their goals. She has the real-world advice you'll need to succeed, including where you can find backers, and how to engage them.

Editorial, Feature
MORE


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]