Le détachement du style et du comportement lors de la mise en œuvre de Lightbox réduit JS

Auteur：Eve Cole Date de mise à jour：2025-05-23 13:00:04

[Browsers 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 dans Lightbox et à réduire le travail de JS dans tous les aspects (occlusion en plein écran, IE6 SELECT OCCLUSION, CENTER BIDIRECTIONNELLE, CONTENU HIGHER ADAPTIVE, etc.).

Téléchargez d'abord le code :

Exécutez la case de code

<! doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; charset = utf-8 /> <meta name = auteur contenu = chomo /> <link rel = start href = http: //www.14px.com title = home /> <itle> blocage plein écran, Lightbox auto-centré </tapie> <style type = text / css> * {margin: 0; rembourrage: 0; } html, corps {hauteur: 100%; débordement: caché; FONT: 12px / 1.5 simsun;}. myPage {line-height: 3; débordement: auto; Largeur: 100%; Hauteur: 100%;}. LightBox, .PopupCover, .Popuppiframe, .PopupComponent {position: absolue; à gauche: 0; en haut: 0; Largeur: 100%; Hauteur: 100%;}. PopupComponent {Z-Index: 2; Affichage: aucun;}. PopuppIframe {affichage: aucun; _Display: Block; _Filter: alpha (opacity = 0);}. PopupCover {background: # 000; Opacité: 0,7; * Filtre: Alpha (opacité = 70);}. LightBox {Text-Align: Centre; Overflow: auto;}. LightBoxContent {affichage: Block en ligne; * Affichage: en ligne; Zoom: 1; Largeur: 300px; rembourrage: 10px; Contexte: #FFF; Border: 5px solide # 00b4ff; Vertical-Align: Middle;}. LightBoxMaxHeight {Affichage: Block en ligne; Adigne vertical: milieu; hauteur: 100%; * Hauteur: 99,5%; Largeur: 1px; débordement: caché; margin-left: -1px;}. LightBoxWrapper {affichage: bloc en ligne; * Affichage: en ligne; Zoom: 1; Text-Align: Left;}. LightBoxClose {Color: # f00;}. LightBoxSubmit {margin-top: 10px; Tableau de rembourrage: 5px; Border-top: 1px solide #ccc;}. LightBoxSubmit Input {Font-Size: 12px; rembourrage: 0 10px; débordement: visible; marge: 0 5px;} </ style> </ head> <body> <div class = popupComponent id = lightbox> <iframe class = popcomponent id = lightbox> <iframe class = popupcover> </v> <div class = lightbox> <span class = Lightboxwapper> </span> <div class = LightContent> <div class = LightboxWapper> Lorsque une ligne est une ligne, la ligne LightBoxContent> <div class = LightBoxWapper> Lorsque la ligne est une ligne, la ligne LightBoxContente> <div Class = LightBoxWapper> Lorsque la ligne est une ligne, la ligne LightBoxContent> <div Class = LightBoxWapper> Lorsque le Class = LightConte est centré <br /> </ div> <div class = lightboxSubmit> <input type = Button Value = déterminer onclick = HideLayer ('lightbox') /> <input type = Button value = annuler onclick = hideLayer ('lightbox') /> </div> </ div> </ div> <div class = popusient id = lightbox2> <iframe class = PopupFrame> </ ifrasient> class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded La hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. /> Lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <Br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <Br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <br /> lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran lorsque le contenu a dépassé la hauteur d'un écran. <rr /> </div> <div class = lightboxSubmit> <input type = Button Value = déterminer onclick = hideLayer ('lightbox2') /> <input type = Button Value = Cance /> Faire semblant de riches contenu <br /> faire semblant de faire un riche contenu riche <br /> faire semblant de riches contenu <br /> <div style = text-adign: Center;> <entrée type = Button Value = Button Button onClick = showlayer ('LightBox') /> </v> Faire semblant de contenu riche <br /> prétendant un contenu riche riche <br /> prétendant un contenu riche <brandispon content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /><div style=text-align:center;><input type=button value=button value=button button onclick=showlayer('lightbox') /></div>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /> Faire semblant de riches contenu <br /> faire semblant de faire un riche contenu riche <br /> faire semblant de riches contenu <br /> en prétendant un riche contenu <br /> faire semblant de contenu riche <br /> faire semblant de le couvrir </ option> </colt> <pr> <pop option> A SELECT pour tester si IE6 peut le couvrir </opoption> </lect> <br /> prétendu être riche pour être riche <br /> Riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> IE6 peut le couvrir </ Option> </lect> <br /> prétendu être riche en contenu <br /> prétendu être riche en contenu <br /> <div style = text-adign: Center;> <input type = Button Value = Button onClick = showlayer ('LightBox') /> <entrée Type = Button Value = lorsque le contenu a dépassé la hauteur d'un écran sur Click = Showlayer ('' LightBox2 ') Riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> /> Faisant semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> prétendant être riche en riches <br /> être riche en riche Le contenu <br /> a fait semblant d'être riche en contenu <br /> comme si on richait en contenu <br /> être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche en contenu <br /> faire semblant d'être riche /> </div> <cript> function showlayer (id) {document.getElementById (id) .style.display = block;} function hideLery (id) {document.getElementyId (id). Aucun;} </ script> </ body> </html>

[ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]

Cette Lightbox a les fonctionnalités suivantes, vous pouvez la tester en modifiant le code ^ - ^:

Cliquer sur n'importe quelle position dans la page peut parfaitement couvrir l'écran (pour le moment, tout élément comprenant la barre de défilement ne peut pas être directement contrôlé). L'élément de sélection peut être bloqué sans se cacher dans IE6 (le défaut de la méthode d'occlusion IFRAME: Après le blocage, si la barre de défilement est traînée, le Select se déplacera toujours au niveau supérieur).
Le Lightbox est très adaptable à son contenu et présente un état de centrage parfait.
Lorsque le contenu est une seule ligne, il est affiché au centre; Lorsque le contenu est multi-ligne, il est affiché dans la gauche; Lorsque la hauteur du contenu fait dépasser la hauteur de l'écran, il apparaît, il apparaît des barres de défilement et s'affiche en haut, afin que les lecteurs puissent lire dans l'image complète.

Si vous êtes intéressé, les conseils suivants pour former cette LightBox sont disponibles pour vous faire référence à:

1. Méthodes d'ombrage plein écran:

un. Cachez la barre de défilement de HTML / Body.

né Utilisez une div comme masque, puis utilisez une div comme page avec des barres de défilement, une empilée en haut et une empilée en bas.

Exécutez la case de code

[ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]