Wie kann ich einen Netflix-Stil iframe Overlay ohne große JavaScript-Bibliothek erstellen?

Question

Ich versuche, eine Verbindung zu verwenden, um ein Overlay zu öffnen, anstatt in einem separaten Popup-Fenstern. Diese Auflage sollte eine halbtransparente Schicht div bestehen aus blockiert den ganzen Bildschirm aus wird angeklickt. Ich strebe auch eine Rolle an dieser Stelle zu deaktivieren. Nicht ganz gleich, wo Sie auf der Hauptseite sind, wenn der Link angeklickt wird, sollte das Overlay sein in der Mitte des X- und Y-Ursprungs des Bildschirms. Innerhalb dieses Overlay div sollte ein iframe so konfiguriert sein, dass in 3 Größen Inhalt geladen werden kann.

Answer 1

Sie können eine alte JS lib prüfen wollen, ich schrieb, genannt SubModal .

Leicht zu verstehen und zu ändern. Gehen Sie in der Stadt;)

Wenn Sie es modded haben, verwenden Sie Minify in Kombination mit gzip auf Ihrem Server . Die lib Größe wird klitzekleine.

Answer 2

Shadowbox ist ein schönes Skript für inline "Pop-ups". Es kann mit einem der üblichen JS Bibliotheken arbeiten, wenn Sie irgendeinen (jQuery, Prototype, etc.) nutzen oder auf seinem eigenen, hat ein ziemlich umfassendes Skinning-System, so dass Sie das Aussehen, ohne anpassen können auf den Quellcode geht in mich selbst.
Es ist auch das einzige Skript (es gibt Dutzende) Ich habe versucht, die zuverlässig über alle gängigen Browser funktionieren würden.

Es wird nicht deaktivieren Sie das Scrollen (Sie immer noch den normale Seite Hintergrund blättern, indem sie durch die dunkele Overlay sehen), aber das „Pop-up“ wird in jedem Fall bleiben auf dem Bildschirm festgelegt.

Answer 3

http://onehackoranother.com/projects/jquery/boxy/

jQuery.boxy ist ein weiterer schön, leicht modaler Dialog Plugin.

Answer 4

Normalerweise verwende ich ThickBox für diese. Es funktioniert wirklich gut und degradiert schön, wenn der Benutzer JS nicht eingeschaltet haben.

Es ist verwenden jQuery, aber man kann es von Google geladen werden: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js und vielleicht den Vorteil Caching erhalten.

Answer 5

Besorgen Sie sich die Javascript ext Bibliothek. Es verfügt über Funktionen für Overlays, die modal sind.

Answer 6

ThickBox (kein entwickelt länger) führte mich zu dieser Bibliothek, die sehr gut zu funktionieren scheint:

http://fancybox.net