LightBox blindée en plein écran et automatiquement centrée

Auteur：Eve Cole Date de mise à jour：2009-07-27 17:14:47

[Navigateurs participant au test : IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Système d'exploitation : Windows]

Ce tutoriel vise à séparer le style et le comportement de lightBox et à réduire le travail de JS sous divers aspects (masquage plein écran, sélection de masquage dans ie6, centrage bidirectionnel, contenu adaptatif en hauteur, etc.).

D'abord le code :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

http://www.14px.com " title="Accueil" />
Blindage plein écran, lightBox à centrage automatique

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Cette lightBox possède les caractéristiques suivantes, vous pouvez la tester en modifiant le code ^-^ :

Cliquer n'importe où sur la page peut parfaitement protéger l'écran (tout élément, y compris la barre de défilement, ne peut pas être directement contrôlé à ce moment-là. Dans IE6, l'élément sélectionné peut être protégé sans le masquer (le défaut de la méthode de protection iframe : après la protection, si faites glisser la barre de défilement et la sélection se déplacera toujours vers le haut).
La hauteur de la lightBox s'adapte à son contenu et apparaît parfaitement centrée.
Lorsque le contenu est d'une seule ligne, il est affiché au centre ; lorsque le contenu est de plusieurs lignes, il est affiché à gauche lorsque la hauteur du contenu est telle que la lightBox dépasse la hauteur de l'écran, une barre de défilement est affichée ; et affiché en haut, afin que les lecteurs puissent le lire complètement.

Si vous êtes intéressé, les conseils suivants qui composent cette lightBox sont disponibles pour votre référence :

1. Méthode de masquage plein écran :

A. Masquez la barre de défilement de html/body.
B. Utilisez un div comme masque, puis utilisez un autre div pour créer une page avec des barres de défilement, une en haut et une en bas.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

http://www.14px.com " title="Accueil" />
Méthode de masquage plein écran

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu

Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu
Faire semblant d'être riche en contenu