Tom Krist: Eingabe-Fenster

Kann mir jemand ein paar Stichworte geben zu den Technologien, mit denen man Eingabe-Fenster erzeugen kann, bei deren Aufruf die Ausgangsseite transparent als Hintergrund durchscheint, so wie im Bild?

Gruß Tom

  1. Hallo,

    Transparente Layer oder Modal Dialog würde ich mal als Suchbegriffe verwenden.

    In Verbindung mit Begriffen wie CSS und JavaScript müsstest Du schnell Tutorials & Demos finden, mit denen Du weiter kommst.

    Hoffe, das bringt Dich weiter.

    Viele Grüße,
    Jörg

  2. Om nah hoo pez nyeetz, Tom Krist!

    Kann mir jemand ein paar Stichworte geben zu den Technologien, mit denen man Eingabe-Fenster erzeugen kann, bei deren Aufruf die Ausgangsseite transparent als Hintergrund durchscheint, so wie im Bild?

    So, wie du die Frage formulierst, klingt es, als ob du Zauberei erwartest. In den meisten Fällen ist es jedoch eine der folgenden Strukturen:

    1
    <div>  
      <element>  
      
      </element>  
    </div>
    
    2
    <div></div>  
    <element>  
      
    </element>  
    
    

    das Element ist beispielsweise ein ganz normales Formular und das div hat folgende CSS-Eigenschaften:

    [link:http://selfhtml.apsel-mv.de/position/position.html@title=position: fixed];  
    top: 0; left: 0;  
    width: 100%; height: 100%;  
    background-color: [link:http://wiki.selfhtml.org/wiki/Referenz:CSS/Farben@title=rgba(196, 196, 196, .4)];  
    /* oder [link:http://wiki.selfhtml.org/wiki/Opacity@title=opacity]: .4 */
    

    Das Einblenden kann dann via Javascript oder auch über CSS (Lösungsidee) geschehen. Welche Variante du verwendest, liegt an deiner Zielgruppe. In einem technik-affinen Hintergrund darfst du wohl von modernen Browsern ausgehen und kannst auf das JavaScript verzichten.

    Solltest du hingegen allgemeines Publikum, auch mit nicht ganz so modernen Browsern, erwarten, würde ich nur das JavaScript anbieten.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hi,

      möchte man das extra div einsparen, könnte man den selben Effekt auch mit

        
      box-shadow: 0 0 0 9999px rgba(0,0,0,.4);
      

      oder

      outline: rgba(0,0,0,.4) solid 9999px;  
      
      

      erreichen.

      Martin

      1. Om nah hoo pez nyeetz, Martin Rettberg!

        möchte man das extra div einsparen, könnte man den selben Effekt auch mit

        box-shadow: 0 0 0 9999px rgba(0,0,0,.4);

        
        > oder  
        > ~~~css
        
        outline: rgba(0,0,0,.4) solid 9999px;  
        
        > 
        
        

        erreichen.

        cool.

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Om nah hoo pez nyeetz, Matthias Apsel!

          cool.

          Unter Umständen doch nicht ganz so cool. Die Seite unter dem Schatten bzw. der Außenlinie bleibt bedienbar, das heißt, Links anklickbar, Formulare ausfüllbar, was vielleicht nicht erwünscht ist.

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. Hi,

            Unter Umständen doch nicht ganz so cool. Die Seite unter dem Schatten bzw. der Außenlinie bleibt bedienbar, das heißt, Links anklickbar, Formulare ausfüllbar, was vielleicht nicht erwünscht ist.

            hoppla!
            Ich habe nur darauf geachtet, dass der Seiteninhalt visuell hinter dem Element liegt.
            Mit :before und :after kann man offenbar auch nicht tricksen, weil die sich ja auf den Inhalt des Elements und nicht das Element selbst beziehen; meine letzte Hoffnung starb dann mit ::outline, was seit 2003 unbenutzt in der Ecke rumliegt.

            Martin

            1. Hi,

              meine letzte Hoffnung starb dann mit ::outline

              natürlich meine ich ::outside und nicht ::outline ;)

              Martin

  3. Danke Euch beiden! Gruß Tom