Einführung
In dieser Lektion werde ich erfahrenen Layout-Designern und CSS-Gurus das Geheimnis nicht verraten, aber dieser Artikel wird für Anfänger nützlich sein. Hier erfahren Sie, wie Sie Popups über einer gesamten Site erstellen.
In den meisten Fällen werden solche Fenster angezeigt, nachdem bestimmte Aktionen auf der Website ausgeführt wurden. Beispielsweise klickt der Benutzer auf den Link "Rückruf anfordern" und ein Bestellformular wird vor ihm angezeigt.
Es ist sehr praktisch, PopUp-Fenster in Verbindung mit Ajax zu verwenden, aber dies ist das Thema einer anderen Lektion.
Immer mehr Webressourcen werden im Netzwerk angezeigt, die PopUp-Popups verwenden. Als Beispiel können wir jedem vertraute soziale Netzwerke geben.
Alle überschüssigen Daten aus den Screenshots werden gelöscht.Vkontakte
Facebook
Twitter
Ich denke, es gibt genug Gründe, um die Frage zu untersuchen: Wie lässt sich PopUp auf Ihrer Website anzeigen?
Erklärung des Problems (TOR)
Sie müssen ein Popup-Fenster mit einem Dimmbildschirm über der gesamten Site erstellen.
Lösung
Methode 1
html
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
CSS
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Ergebnis:
Sehr oft schlagen sie vor:
position:absolute;
Ja, das Ergebnis ist ähnlich, aber aufgrund der Tatsache, dass wir die Höhe des Dimmblocks festgelegt haben, werden Bildlaufleisten angezeigt. Deshalb ist diese Methode nicht geeignet.
Methode 2
Diese Methode unterscheidet sich nicht grundlegend von Methode 1, aber ich finde es bequemer.
HTML (keine Änderung)
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
Css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Das Ergebnis ist ähnlich.
Aufgrund der Eigenschaft:
min-Höhe: 100%; Unser Dimmblock hat eine Breite von 100% und eine
Mindesthöhe von 100% des Bildschirms erreicht.
Der einzige Nachteil dieser Methode ist, dass Internet Explorer diese Eigenschaft nur ab Version 8.0 unterstützt.
Jquery Magie hinzufügen
Fügen Sie nun Links hinzu, um unser Popup auszublenden / anzuzeigen.
Dazu müssen Sie die jQuery-Bibliothek und ein kleines Skript verbinden:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){
Sie müssen auch das HTML aktualisieren:
<div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div>
Ergebnis
Wenn die Seite geladen wird, verschwindet das Popup-Popup-Fenster.
Wenn wir auf den Link "Popup anzeigen" klicken, wird ein Popup-Fenster angezeigt. Wenn Sie auf den Link „Popup ausblenden“ klicken, wird das Popup-Fenster wieder ausgeblendet.
Das Ergebnis ist hier zu sehen:
http://jsfiddle.net/p7NbX/15/