Ein Art von "Popup" Fenster

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 ?
 

EuroCent

Klappstuhl 2.0
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. :)
 

EuroCent

Klappstuhl 2.0
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 :)
 

clamicun

Mitglied

clamicun

Mitglied
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 ...
 

yxyx

Grünschnabel
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:

Neue Beiträge