Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Einfache lightbox

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Einfache lightbox

    Hallo,
    es gibt auf Lightbox JS ein Script um Bilder in den Vordergrund zu bringen und die Webseite ein wenig in den Hintergrund zu stellen.
    Ich habe nun vor nur einen kleinen Text in den Vordergrund zu setzt und suche dazu ein Script was kleiner und einfach ist als diese lightbox.
    Gibt es das oder wie schaffe ich es das per klick die Webseite mit so einem Hintergrund versehen wird?

  • #2
    hallo
    ich würde dir mal den code der lightbox etwas ansehen, es wird dir zwar ziemlich bald abstellen, weil es enorm viel ist, aber es gibt dir doch einen kleinen einblick.
    Schau dir vorallem das CSS an, da sind die wichtigen Sachen definiert, genau sagen wie es aussehen sollte kann ich dir nicht sagen. Opacity, Filter, ... sind aber im CSS sicher von Nöten. Es ist am besten du "tüfftelst" einfach mal selber, learning by doing.
    gruss und viel glück!

    ps: wäre schön wenn du das ergebniss am schluss hier platziern könntest, damit wir beim nächsten welcher etwa die selbe frage hat etwas weiterhelfen können.

    Kommentar


    • #3
      eigentlich ist das ganz einfach:

      Code:
      <div id="darkenx"></div>
      div-layer (unsichtbar)

      Code:
      #darkenx {
          position:absolute;
      	top: 0;
      	left: 0;
      	width:100%;
      	height:100%;
      	z-index:998;
      	background-color:#000;
      	filter:alpha(opacity=60);
      	opacity: 0.6;
      	display:none;
        }
      css code für das div. hintergrund farbe ist schwarz mit einem alpha-Wert von 60% (kannst du ja variieren). damit das nun ganz oben aufliegt, setzt man den z wert auf 999 (oder höher);

      Code:
      document.getElementById("darkenx").style.display = "block";
      mit javascript machst du "darkenx" (unser div-layer) sichtbar.


      wenn du noch ein text einbinden willst, solltest du darauf achten, dass der z wert des textes höher als des divs ist.


      bekanntes problem:
      sobald man anfängt auf der seite zu scrollen, bedeckt das div nicht mehr die ganze seite. hoffe ich konnte dir trotzdem helfen

      Kommentar


      • #4
        Das es so einfach ist hätte ich nicht gedacht.
        Vielen Dank

        Kommentar


        • #5
          und dann bitte als ERLEDIGT markieren.

          Kommentar

          Lädt...
          X