"Yuaw" <wo*@wow.comwro te in message news:WcoOg.682$ cf2.448@trndny0 7...
>I managed to cobble together some code and all I need to be on my way is to
have the close button I created to always be at the top right of my pop up.
The pop ups are large versions of thumbnail images and vary in size, so
that's why I need the button to follow the image size. Is this possible to
do??
AND, this does not render correctly in IE!
Can someone please help me out? :(
I'll have to say, I'm very close. :D (new code below)
Things that do not work:
In IE:
- Translucent background does not cover the page on click. It only appears
as a bar across the top.
- The bar does not go all the way across the screen. it stops about 10px
short of the right side.
- Close button "X" on the popup is on the right side
In Firefox:
- Translucent background does not cover the entire page on click. It stops
just short of the bottom of the page
- Close button "X" on the popup is on the left side
<html>
<head>
<title>Layer on Click</title>
<style type="text/css">
..translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(184, 177, 207);
filter:alpha(op acity=50);
-moz-opacity:0.5;
opacity: 0.5;
z-index: 10001;
}
</style>
<script>
<!-- Begin
function toggle(id)
{
if ( document.getEle mentById)
{
var layer = document.getEle mentById(id);
layer.style.dis play = (layer.style.di splay == 'none') ? 'block' : 'none';
if (id=='logo')
{
var b= document.getEle mentById('btnCl ose');
b.style.positio n = "absolute";
b.style.top=0;
b.style.left=pa rseInt(b.offset Parent.offsetWi dth) -
parseInt(b.offs etWidth);
}
}
}
// End -->
</script>
</head>
<body>
<center>
<a href="#" onclick="toggle ('blockUI');tog gle('logo');">C lick to
enlarge</a>
<div id = "logo" style="display: none; position: absolute; left: 200px;
top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle ('blockUI'); toggle('logo');
"><img src="/images/close_icon.jpg" /></a>
<img src="/images/45776_1.jpg" border=0 alt="" />
</div>
<div id="blockUI" class="transluc ent" style="display: none;
background-color: gray;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="re turn false"
onmousemove="re turn false"
onmouseup="retu rn false" ondblclick="ret urn false">
</div>
</center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nunc odio,
auctor a, euismod ut, adipiscing a, diam. Curabitur est sem, lobortis vitae,
faucibus sed, euismod ac, dui. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Cras gravida congue
quam. Nullam tempor adipiscing massa. Vivamus in velit ut nisi dignissim
malesuada. Vestibulum nonummy porttitor nisl. Suspendisse dapibus, velit
quis tristique eleifend, magna nibh mollis libero, at aliquam leo orci et
tellus. Nam quis augue ut libero elementum vestibulum. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Proin feugiat ullamcorper purus. Etiam non elit non nisi suscipit molestie.
</p><p>
Aliquam purus arcu, gravida in, pulvinar ac, viverra gravida, dolor. Morbi
vel justo. Nullam non neque fermentum leo tincidunt facilisis. Integer
purus. Proin faucibus purus at velit. Praesent consequat. Proin a pede eu
enim aliquet mollis. Sed varius nisi. Aliquam feugiat. Aliquam at lectus a
neque lobortis sagittis. Sed dapibus nisl sit amet nunc. Suspendisse
lobortis vestibulum mi. Sed sed tellus at pede laoreet faucibus. Cras
ullamcorper, magna et facilisis accumsan, ligula lectus aliquet nisi, id
venenatis tellus ante in arcu. Vestibulum a enim nec odio tincidunt
elementum. Aliquam tristique. In mi lacus, scelerisque quis, volutpat ac,
viverra vitae, tellus. Vivamus vel nulla a turpis vestibulum volutpat. Etiam
ornare arcu sed nisl.
</p><p>
Sed est risus, bibendum ut, vestibulum a, blandit iaculis, metus. Proin
condimentum accumsan arcu. Donec mauris. Nam nibh. Nunc vestibulum congue
nunc. In at lorem sed nisl scelerisque gravida. Nullam sit amet arcu id
velit adipiscing lacinia. Vestibulum vitae elit sed urna tempor aliquam.
Curabitur non nibh. Vestibulum elementum tristique eros. In tortor arcu,
semper vel, convallis quis, pretium a, arcu. Suspendisse potenti. Phasellus
eros turpis, ultricies vitae, placerat in, posuere vitae, orci. Nullam
aliquet.
</p>
</body>
</html>
