Transparent pop-up - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

clifford · 12-20-2005, 05:52 PM

Hey folks,

Have you ever came across those sites where a transparent text or image floats onto the screen and then stops. I assume the floating part is done using JavaScript or another coding method but how do you make the popup transparent so the visitor can still view the text on the page behind it?

I tried using a transparent gif in the popup but it still blocks the text behind it that the popup covers.

bigbomba · 12-20-2005, 06:36 PM

Yeah I have seen those. A lot of them I haven't been able to exit, and it gets really annoying. I think it drives traffic away, so it's not a good thing to have. You shouldn't try to make one.

thejunior · 12-20-2005, 08:51 PM

Yeah, I kind of agree with ~bigbomba they annoy me too. Plus most people these days use some type of popup blocker. I use the google toolbar and have pop-up's blocked but once in a while one sneaks in. Particularly the type you wish to create. Anyway it is your design. If you just want a window with some text within it you could use some type css with a transparency background along with javascript.

clifford · 12-21-2005, 05:56 PM

Thanks for the opinions but I need a solution. It is not for me it is for a client and it is not for a pop-up sales pitch. The customer wants a transparent skin in a blue-ish color to appear over the footer area of one of their pages with instructions for there visitors.

So it will show over an image and It can be just a window with text only. It just needs to be transparent so the image is still visible.

I hope this explains what i am trying to do a little better..

kayla · 12-21-2005, 08:07 PM

Hi,

I have this example you may be able to customize to fit your needs. I save all kinds of code in my library. Javascript, php, and other code snippets because you never know when you may need it for a design.

[HTML]<html>
<head>
<title>Your Page Title</title>



<style type="text/css">
.transparent {
filter:alpha(opacity=80);
background-color:#B7CEEC;
display:none;
width:170;
height:100;
position:absolute;
color: navy;
border: 1 red solid;
}
</style>


<script>
/* this function shows the pop-up when
user moves the mouse over the link */
function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + 35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x;
/* set the pop-up's top */
Popup.style.top = y;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<a href="" onMouseOut="Hide()" onMouseOver="Show()" onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse is still over the link.
<div id="Popup" class="transparent">
<div style="background-color:#C3FDB8">
<b>Title goes here</b></div>
<div>Description goes here</div>
</div>
</body>
</html>
[/HTML]hth

twisterfries · 12-28-2005, 03:04 PM

Thanks for the code men.Is this your work?Im actually curios about this topic glad there is a genius to teach us the how to?!hehe