Dursichtiges Fenster mit JavaScript und Transparenz mit CSS

8 Mar 2009 um 14:41 - JavaScript

Sehr viele Webseiten verwenden populäre Frameworks wie jQuery. Da braucht man fast keine Grundkenntnisse in JavaScript o.ä. nur reine Verwendung ohne Hintergedanken. Ich versuche zu erklären, wie man diese Kleinigkeiten selbst programmieren kann.

Ziel ist durchsichtiges Fenster mit JavaScript zu programmieren. Die Durchsichtigkeit wird mit CSS realisiert.

filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;

Die Meldung wird in einem DIV-Element platziert, das am Anfang nicht sichtbar ist. Die absolute Platzierung mit dem größerem "z-index"-Wert, sodass das Fenster über alle andere Fenster erscheint.

visibility: hidden; 
position: absolute;
left: 0;
top: 0;
z-Index: 1;

Jetzt kommt JavaScript-Code. 2 einfache Funktionen: showPic

function showPic() {
 x=document.body.clientWidth;
 y=document.body.clientHeight;
 scrollTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
 paddingTop=scrollTop+(y-document.getElementById("windows").clientHeight)/2;
 paddingLeft=(x-document.getElementById("windows").clientWidth)/2;
 document.getElementById("windows").style.top=paddingTop+"px";
 document.getElementById("windows").style.left=paddingLeft+"px";
 document.getElementById("windows").style.visibility="visible";
}

und hidePic

function hidePic(){
document.getElementById("windows").style.visibility="hidden";
}
Kommentare

Bisland keine Kommentare - sei der erste!


© 2008 Anton Pavlushko - Webentwicklung, Internetmarketing und Suchmaschinenoptimierung (SEO)

0.0063860416412354 sec