nicht angemeldet
Hallo, ich habe das Problem das ich mir zu Übungszwecken ein eigenes kleines Lightbox script schreiben wollte. Funktioniert auch super in opera, IE, und chrome. Jedoch will firefox nicht damit arbeiten.
Kann mir da wer auf die sprünge helfen?
Hier die HTML datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function lightbox_on(){
lightbox.className = 'lightbox_on';
lightbox_content.className = 'lightbox_content_on';
}
function lightbox_off(){
lightbox.className = 'lightbox_off';
lightbox_content.className = 'lightbox_content_off';
}
</script>
</head>
<body>
<button onClick="javascript:lightbox_on()">Lightbox Aktivieren</button>
<div id="lightbox" class="lightbox_off" onClick="javascript:lightbox_off()"></div>
<div id="lightbox_content" class="lightbox_content_off">dsdsfdsf</div>
</body>
</html>
Hier die Stylesheet:
/* Formatierung der Lightbox DIV - des Hintergrunds */
.lightbox_off{
visibility:hidden;
}
.lightbox_on{
visibility:visible;
position:fixed;
width:100%;
height:100%;
background-color:#000000; /* Hintergrundfarbe der Lightbox -> normalerweise Schwarz*/
opacity: 0.8; /* Sichtbarkeit des Hintergrunds (0 = 0%; 0.5 = 50% ; 1 = 100%) */
top: 0px;
bottom: 0px;
left:0px;
right: 0px;
}
/* Formatierung der Lightbox Content DIV */
.lightbox_content_off{
visibility:hidden;
}
.lightbox_content_on{
position:fixed;
width: 650px; /* breite der Box */
height: 400px; /* höhe der Box */
top: 50%;
left: 50%;
margin: -200px -325px; /* Damit die Box mittig ist muss der 1. Wert = der halben höhe und der 2. Wert gleich der halben Breite sein */
background-color:#FFFFFF; /* Hintergrundfarbe */
}