Effet: lorsque les utilisateurs utilisant les systèmes Windows s'arrêtent, l'interface qui apparaît permet uniquement aux utilisateurs de choisir d'arrêter, de se déconnecter ou d'annuler les actions, tandis que les programmes du bureau ne peuvent pas être utilisés et que l'écran est grisé. L'effet d'arrêt Windows est illustré à la figure 22.1.
Avantages de l'utilisation de cet effet sur les pages Web: Quels sont les avantages de l'utilisation de cet effet d'arrêt sur les pages Web? Tout d'abord, après avoir cliqué sur un lien, les actions qui ne sont pas disponibles pour l'utilisateur pour le moment sont cachées en arrière-plan, et les actions disponibles sont placées en haut de l'écran et mises en évidence, ce qui peut éviter la mauvaise opération de l'utilisateur. Deuxièmement, la mise en évidence des informations peut également rappeler aux utilisateurs des choses auxquelles il faut faire attention.
Principe: Le principe de réalisation de cet effet dans une page Web est très simple. Créez deux couches, une comme couche d'ombrage, couvrant la page entière et affichage en gris; L'autre couche sert de partie en surbrillance, au-dessus de la couche d'ombrage, qui peut être définie en définissant la propriété Z-Index du calque. Lorsque l'effet d'arrêt est annulé, supprimez simplement ces deux éléments de couche dans la page.
Code:
<html>
<adal>
<Title> Ajax Fermdown Effet </TITME>
<Styletype = Text / CSS>
#lightbox {/ * Ce calque est une couche de surbrillance * /
Border-droite: # ffff1pxsolid;
Border-top: # ffff1pxsolid;
Affichage: bloc;
Z-Index: 9999; / * Définissez ce calque en haut de la page Web, définissez-le assez grand * /
Arrière-plan: # fdfce9; / * définir la couleur d'arrière-plan * /
Gauche: 50%;
Marge: -220px0px0px-250px;
Border-Left: # ffff1pxsolid;
Largeur: 500px;
Border-Bottom: # ffff1pxsolid;
Position: absolue;
En haut: 50%;
Hauteur: 400px;
Texte-aligne: gauche
}
#Overlay {/ * Ce calque est un calque de couverture * /
Affichage: bloc;
Z-index: 9998; / * Définissez le bas de la couche de surbrillance * /
Filtre: alpha (opacité = 20); / * réglé sur transparent * /
Gauche: 0px;
Largeur: 100%;
Position: absolue;
En haut: 0px;
Hauteur: 100%;
Color d'arrière-plan: # 000;
Moz-opacité: 0,8;
Opacité: .80
}
</ style>
</ head>
<body>
<ahref = http: //www.baidu.comtarget=_blank> baidu </a>
<! - Ce calque est un calque de couverture ->
<divid = superposition> </div>
<! - Ce calque est une couche de surbrillance ->
<divid = lightbox> <href = # onclick = javaScript: f ()> close </a> & nbsp; <ahref = # onclick = javascript: f1 ()> ouvrir </a> </div>
</docy>
</html>
<cript>
functionf ()
{
document.getElementById (superposition) .style.display = aucun;
}
functionf1 ()
{
document.getElementById (superposition) .style.display = block;
}
</cript>
Remarque: S'il y a une balise <lect> dans le navigateur IE, la balise ne peut pas être écrasée par le calque écrasé, mais il peut être écrasé dans d'autres navigateurs. La figure 22.3 montre l'effet de la balise <lect> dans le navigateur IE, et la figure 22.4 montre l'effet de la balise <lect> dans mozzilafirefox.
Figure 22.3 <lect> Tag dans le navigateur IE
Figure 22.4 La balise <lect> dans le navigateur MozzilaFireFox
Ainsi, lorsque vous utilisez le navigateur IE, vous devez d'abord masquer l'élément <lect> dans la page Web. Par exemple, le code suivant peut être utilisé pour masquer tous les éléments <lect> de la page.
selectts = document.getElementsByTagName ('select');
pour (i = 0; i <selets.length; i ++) {
sélectionne [i] .Style.Visibility = visibilité;
}