Comment créer une superposition iframe de style Netflix sans une immense bibliothèque javascript?

Question

J'essaie d'utiliser un lien pour ouvrir une superposition plutôt que dans une fenêtre contextuelle séparée. Cette superposition doit consister en un calque div semi-transparent qui empêche tout clic sur tout l'écran. Je vise également à désactiver le défilement à ce stade. Peu importe où vous vous trouvez sur la page principale, lorsque le lien est cliqué, la superposition doit être au centre des origines X et Y de l'écran. À l'intérieur de cette couche de superposition, il devrait y avoir une iframe configurée de telle sorte que 3 tailles de contenu puissent être chargées. & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & 173. & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173; & # 173;

Answer 1

Vous pouvez consulter une ancienne librairie JS que j'ai écrite, appelée SubModal .

Facile à comprendre et à modifier. Aller en ville;)

Une fois que vous l'avez modifié, utilisez Minify en combinaison avec gzip sur votre serveur. . La taille de la lib sera minuscule.

Answer 2

Shadowbox est un bon script pour les "popups" en ligne. Il peut fonctionner avec toutes les bibliothèques JS habituelles si vous en utilisez (jQuery, Prototype, etc.) ou seul, si vous avez un système de skinning assez complet pour pouvoir adapter les apparences sans avoir à entrer dans le code source lui-même.
C'est aussi le seul script de ce type (il y en a des dizaines) que j'ai essayé qui fonctionnerait de manière fiable sur tous les navigateurs habituels.

Cela ne désactivera pas le défilement pour vous (vous pouvez toujours voir le fond de page normal défiler à travers la superposition sombre), mais le & popup; popup " restera dans tous les cas figé à l'écran.

Answer 3

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

jQuery.boxy est un autre plugin de dialogue modal agréable et léger.

Answer 4

J'utilise habituellement ThickBox pour cela. Cela fonctionne vraiment bien et se dégrade bien si l'utilisateur n'a pas activé JS.

Il utilise jQuery, mais vous pouvez le charger depuis Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js et peut-être tirer parti de la mise en cache.

Answer 5

Saisissez la bibliothèque ext en javascript. Il a une fonctionnalité pour les calques modaux.

Answer 6

ThickBox (qui n'est plus développé) m'a conduit à cette bibliothèque qui semble très bien fonctionner:

http://fancybox.net