Javascript Seite ausgrauen?

3 Antworten

medmonk
30.05.2016, 00:58 
<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 
Hansdergott
30.05.2016, 13:44

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)
rallytour2008
30.05.2016, 00:05

Hallo Dermanilor

Binde einen Farbcode mit ein und beobachte was passiert.

GrußRalf