Ein Art von "Popup" Fenster

C

clamicun

Mitglied
Wahrscheinlich kennen viele Twiter und FB ... Wenn ich dort auf einen Eintrag u.a. klicke, öffnet sich eine Art "Popupfenster" ... Ein "Popup" im klassischen Sinne kann es nicht sein, denn die werden per Default in allen Browsern gesperrt ...
Eine Idee ?
 
Du könntest mit einem Layer arbeiten.
Also eine DIV-Box die Dynamisch den Inhalt beim Hover läd und anzeigt. :)

Um aber den Inhalt Dynamich machen zu können, wirst Du ohnehin nicht ohne JS auskommen können. :)
 
Panik vor JS hat hier denk Ich keiner @clamicun

Es ist nur eben mir CSS nicht umsetzbar wenn es dynamisch gestaltet werden soll :)

Falls doch, dann bitte ein Beispiel :)
 
Falls doch, dann bitte ein Beispiel ...
Jesus , ein Beispiel ...
Ich habe nicht einen Hauch von php/html (dafür hatte ich immer Kollegen).
Aber wenn der Enkel bei der Erstellung einer Homepage um Hilfe ruft, muss Opa das in kurzer Zeit eben lernen ...
 
Hier ein Beispiel für ein Popup ohne JavaScript.
Code: 
<!doctype html>
<html>
    <head>
        <title>Popup ohne Javascript</title>
        <style type="text/css">
        p {height: 2000px; border: 1px solid #000000;}
      
        div#no_popup {position: fixed; display: none;}
        div.window {width: 600px; height: 400px; margin: -200px 0 0 -300px; position: fixed; top: 50%; left: 50%; background-color: #ffffff; box-shadow: 0 0 10px #000000;}
        div.window_header {width: 100%; height: 30px; background-color: #ffcc7f; position: absolute; top: 0; left: 0; list-style-type: none; margin: 0; padding: 0;}
        div.window_content {position: relative; top: 30px; left: 0; height: 350px; padding: 10px; overflow: auto;}
        @media (max-width: 600px)
        {
            div.window {width: 100%; margin-left: 0; left: 0;}
        }
        @media (max-height: 400px)
        {
            div.window {height: 100%; margin-top: 0; top: 0;}
        }
        a.window_close {text-decoration: none; text-align: center; font-size: 28px; position: absolute; top: 0; right: 0; height: 30px; width: 30px; border: none; background: none; box-shadow: none;}
        a.window_close:hover, button.window_close:focus {border: none; background: #ff8a7f; box-shadow: none;}
        div#popup {display: none;}
        div#popup:target {display: block;}
        </style>
    </head>
    <body>
        <div id="no_popup"></div>
        <p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="#popup">Hier geht es zum Popup</a></p>
        <div id="popup" class="window">
            <div class="window_header">
                <a href="#no_popup" class="window_close">X</a>
            </div>
            <div class="window_content">
                Popupinhalt.
            </div>
        </div>
    </body>
</html>
Durch die Pseudoklasse target wird das Popupfenster nur sichtbar, wenn die div selektiert wird. Mit Hilfe der unsichtbaren div mit position: fixed; wird vermieden, dass die Seite beim schließen des Popups wegscrollt. Um das zu testen, habe ich vor dem Link einige Zeilenumbrüche eingefügt.

Wenn man mehrere Popups benötigt, kann man einfach die id der div.window ändern.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück