Javascript "popup"

Tags:    html css

Hej,

Jeg har brug for noget, der er lidt svært at forklare, så jeg prøver med to billeder som eksempler.

Jeg har en side, der ser normal ud. Lidt som den her:

http://peecee.dk/?id=1278


Så har jeg brug for, at når man klikker på et bestemt link fx, åbner den en popup midt på siden, mens resten af siden "fader" lidt ud, og bliver deaktiv. Ligesom det her:

http://peecee.dk/?id=1279
(Det er bare lavet i photoshop det der)

Er der nogen der har en ide til at gøre det med noget javascript og css eller noget?



2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato
prøv det her:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
var animation = function(){}

animation.prototype.fadeIn = function(el, i){

if (typeof el !== "object"){
var oel = document.getElementById(el)
}else{
alert("Can't parse an object")
}
i = i-0.03
x = i*100
oel.style.opacity = i
oel.style.filter = "alpha(opacity="+x+")"
if (i>=0.4){
var t = window.setTimeout("ani.fadeIn('"+el+"', "+i+")",100)
}
}
var ani = new animation()
</script>
<style>
body{
position: absolute;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

#body{
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}

#popup{
position: absolute;
left: 50%;
top: 50%;
height: 300px;
width: 300px;
background-color: red;
visibility: hidden;
}
</style>

</head>
<body>
<div id="popup"></div>
<div id="body">
<input type="button" value="popup" onClick="document.getElementById('popup').style.visibility = 'visible'; ani.fadeIn('body', 1)" />
</div>
</body>
</html>



prøv med at ligge en div der har fixed position med top 0px left 0px
og width og height på 100% og margin 0px z-index 1 højerer end det øjeste bruge på siden og 1 lavere en popup div. backggroud-color:gray;filter:alpha(opacity:75);-moz-opacity:0.75;



t