Javascript Seite ausgrauen?
Wie kann ich mit Js, Html und css die Seite ausgrauen und eine Nachricht anzeigen, während man auf der Seite nichts anklicken kann? Ist für ein Browsergame ne Art Ladescreen. Danke!
3 Antworten
<div class="page-overlay active"> <div class="dialog-box"> <!-- dialogbox-content here! --> </div>
</div>
<div class="page-wrap">
<!-- content here! -->
</div>
Der Division mit der Klasse page-overlay folgende Formatierungen zuweisen:
.page-overlay { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s;
}
Statt mit opacity kannst du auch mir rgba(0,0,0,0) als background-color arbeiten. Mit Hilfe der Klasse active dann den Zustand so gestalten, wie er sein soll, wenn die Dialogbox geöffnet ist.
.page-overlay.active {
opacity: 1;
visibility: visible;
transition: opacity 0.6s;
}
In der Division mit der Klasse page-overlay kannst du dann beliebige Dialoge unterbringen. Mit Hilfe des Checkbox-Hack kannst du das öffnen und schließen dann auch ohne JavaScript (jQuery) steuern. Funktioniert auch problemlos in älteren Browsern und hat den großen Vorteil, das deine Dialoge auch bei deaktiviertem JavaScript »geladen« werden.
Was jetzt das Überlagern angeht, dir mal ein Beispiel herausgesucht habe. Kannst du ja einfach adaptieren und weiter an deine Wünsche anpassen. Du musst die Dialoge auch nicht zwingend in eine eigene Divisionen auslagern. Ich selber finde es der Übersicht wegen meist ganz sinnvoll. Muss aber jeder für sich wissen und auch vom Umfang der Website abhängig ist.
Full Overlay Effects: http://goo.gl/5t0QPn
Pure CSS » Checkbox-Hack: http://goo.gl/G2o7BH
LG medmonk
Benutze einen div Container der über deine Seite liegt und deinen Seiteninhalt abdeckt.
Position fixed, width100% height:100%, z-index:999, display:block, background-color:rgba (128,128,128.0.75)
Hallo Dermanilor
Binde einen Farbcode mit ein und beobachte was passiert.
GrußRalf