Wie erstelle ich ein Netflix-Style iframe-Overlay ohne eine riesige JavaScript-Bibliothek?

Question

Ich versuche, einen Link zu verwenden, um ein Overlay zu öffnen, anstatt in einem separaten Popup-Fenster. Dieses Overlay sollte aus einer halbtransparenten Div-Schicht bestehen, die verhindert, dass auf den gesamten Bildschirm geklickt wird. Ich habe auch vor, zu diesem Zeitpunkt das Scrollen zu deaktivieren. Egal, wo Sie sich auf der Hauptseite befinden, wenn der Link angeklickt wird, sollte das Overlay in der Mitte der X- und Y-Ursprünge des Bildschirms stehen. Innerhalb dieser Overlay-Div sollte ein iframe konfiguriert werden, sodass 3 Größen von Inhalten geladen werden können.

Answer 1

Shadowbox ist ein schönes Skript für Inline-"Popups". Es kann mit jeder der üblichen JS-Bibliotheken funktionieren, wenn Sie eine verwenden (jQuery, Prototype, etc) oder eigenständig, verfügt über ein ziemlich umfassendes Skin-System, damit Sie das Aussehen anpassen können, ohne in den Quellcode eingreifen zu müssen.
Es ist auch das einzige Skript (es gibt Dutzende), das ich ausprobiert habe, das zuverlässig in allen üblichen Browsern funktioniert.

Es wird das Scrollen nicht für Sie deaktivieren (Sie können immer noch sehen, wie der normale Seitenhintergrund durch das dunkle Overlay scrollt), aber das "Popup" bleibt in jedem Fall auf dem Bildschirm fixiert.

Answer 2

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

jQuery.boxy ist ein weiteres schönes, leichtes Modal-Dialog-Plugin.

Answer 3

Vielleicht möchtest du meine alte JS-Bibliothek namens SubModal überprüfen.

Einfach zu verstehen und zu ändern. Viel Spaß dabei ;)

Nachdem du es angepasst hast, verwende Minify in Kombination mit gzip auf deinem Server. Die Größe der Bibliothek wird winzig klein sein.

Answer 4

Normalerweise verwende ich ThickBox dafür. Es funktioniert wirklich gut und degradiert schön, wenn der Benutzer kein JS aktiviert hat.

Es verwendet jQuery, aber Sie können es von Google laden: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js und vielleicht von Caching profitieren.

Answer 5

Holen Sie sich die JavaScript ext Bibliothek. Es verfügt über Funktionen für Überlagerungen, die modal sind.