Full Page Overlay – FAO Abraham

[Todd Flom]

Hi Don,

I’ve been looking for an overlay solution. I looked at your site and it looks like you solved the Mac problem. Can you explain what you did? Also, your overlay seems to work great with IE 6. What was it you did to get that to work? Any info would be much appreciated.

Thanks,
Todd

[Wesley Slappey]

i have tried

on (release){
getURL(“javascript:clicker()”);
}

and nothing happens. I am using Flash CS4 and is coding in action script 2.0…

[Donnie Snyder]

I realize this is an old post but whenever I tried to add an image to in the innerHTML object it maintained the transparency of the div. I tried creating a new style without any transparency and wrapping the image in that but that did not work. I simply removed the background color and transparency and was able to use the script. It was exactly what I needed but the transparency would have been cool if I could have gotten it to work. Thanks for the cool script.

[Chris Thornberry]

Abraham,

I recently found your tutorial on pop-up overlays and it is exactly what we wanted to do when we update our website. I have gotten everything to work perfectly except that the opacity is still affecting my pop-up. I tried to read all the posts on this issue before posting another one myself, by I cannot find anything that references ‘wmode’ which seemed to help solve the issue for others.

Here is my code if it helps:

function clicker(wind){

var thediv=document.getElementById(‘displaybox’);

if(thediv.style.display == “none”){

thediv.style.display = “”;

var myWins=new Array();

myWins[1]=”

Close Video

“;
myWins[2]=”Close Video“;
myWins[3]=”Close Video“;
thediv.innerHTML = myWins[wind];
}else{
thediv.style.display = “none”;
thediv.innerHTML = ”;
}
return false;
}

Thanks for this info, it has gotten me 90% of the way there very quickly!

– Chris

[Sandip Valanju]

Hi Abraham,
thanks for the great article – it really helped me.

But i have one problem for IE 6.
overlay cant display proper.
page display window error

Thanks

[Clomper Van housen]

Abraham, I have been trying to create a close button in my swf that will close the overlay. This script

on (release){
getURL(“javascript:clicker()”);
}

is not working. I just get a blank page that says “false” on it. You would be my hero if you could let me know a way to close the overlay from flash. Thanks!

[Clomper Van housen]

Another way around the transparency issue is to use a 50% opaque PNG as your div background image. Replace this:

<style>
#displaybox {
z-index: 10000;
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*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

With this:

<style>
#displaybox {
z-index:10000;
background-image:url(‘images/img_50grey.png’);
background-repeat: repeat;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

Where “img_50grey.png” is a black 1×1 pixel png with the transparency set to 50%. Text and images that you put in ‘innerHTML’ will no longer inherit the transparency of the displaybox.

[Eric Wilcox]

Hi Abraham,

I have been trying to implement a modified version your “full Page Overlay” with limited results. Basically just want to display a small GIF image in a popup window. I have managed to get the popup window with the gif image displayed in a scrolling box while working in Dreamweaver in live view . However, when I try to view it in an actual browser, I get the popup and a scrolling box but the gif image doesn’t display. (In I.E. no gif and in Firefox I get white box that Says “click here to download plugin” but when I do none are found). Ideally I would like to just have the popup display the gif without a scrolling box. Here is a link to my page: https://www.psi-team.com/servicesNew3popup test.html

[Abraham Chaffin]

Hello,

You might also consider using jQuery for this as it has a simple plugin which does this as well.

In the following example I used kOverlay:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Document</title>
<script src='https://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='https://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>

<a href='javascript: void(0);' onclick="

$('#my_hidden_div_id_1').koverlay({title: 'Put Your Title Here or Not'});
$('.css_koverlay').css({'background-color':'#9c183a'});

">

Link Text

</a>

<div id="my_hidden_div_id_1" style="display: none;">

Put your content here...

</div>

</body>
</html>


Abraham

[Jung Yoo]

im am using your code for a school project. Unfortunately It doesn’t work for me… I want the overlay to hav other contents other than close window but I can’t do it… How can I add some pictures in it before the close window????