Dans le chapitre précédent, j'ai présenté qu'un module d'édition de zone partielle pouvait être ajouté à la page masquée. Dans ce chapitre, je présenterai la page parent pour afficher le calque de masque et faire apparaître une boîte de dialogue semi-transparente. La boîte de dialogue est la sous-page contextuelle, div.
Les rendus sont les suivants :
L'implémentation spécifique du code est la suivante :
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TÊTE>
<TITLE> Nouveau document </TITLE>
<META NAME="Générateur" CONTENT="EditPlus">
<META NAME="Auteur" CONTENT="">
<META NAME="Mots clés" CONTENT="">
<META NOM="Description" CONTENT="">
</HEAD>
<style type="text/css">
<!--
.mondiv {
couleur d'arrière-plan : #FFFFFF ;
bordure : 5px solide #c7c7c7 ;
alignement du texte : centre ;
hauteur de ligne : 20 px ;
taille de police : 12 px ;
poids de la police : gras ;
indice z : 999 ;
largeur : 500 px ;
hauteur : 300px ;
gauche : 50 % ;
haut : 50 % ;
margin-left:-150px!important;/*FF IE7 cette valeur est la moitié de sa propre largeur*/
margin-top:-60px!important;/*FF IE7 Cette valeur est la moitié de sa hauteur*/
marge supérieure : 0 px ;
position:fixe!important;/* FF IE7*/
position:absolue;/*IE6*/
_top : expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg,.popIframe {
couleur d'arrière-plan : #666 ; affichage : aucun ;
largeur : 100 % ;
hauteur : 100 % ;
gauche : 0 ;
haut : 20 % ;/*FF IE7*/
filtre:alpha(opacité=50);/*IE*/
opacité:0,5;/*FF*/
indice z : 1 ;
position:fixe!important;/*FF IE7*/
position:absolue;/*IE6*/
_top : expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/* www.VeVB.COm IE5 IE5.5*/
}
-->
</style>
<script>
function showDiv(tag,tid,lawyerName){
var light1=document.getElementById(tag);
light1.style.display='bloc';
document.getElementById('bg').style.display='block';
}
fonction closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
<CORPS>
<div id="popDiv" style="display:none;">
<pré>
Temple des fleurs de pêcher (extrait de Zhang Xiaosi)
Il y a un temple des fleurs de pêcher à Taohuawu et une fée des fleurs de pêcher sous le temple des fleurs de pêcher.
La fée des fleurs de pêcher a planté des pêchers et cueilli des fleurs de pêcher en échange de l'argent du vin.
Quand je suis sobre, je m'assois juste devant les fleurs ; quand je suis ivre, je viens dormir sous les fleurs.
Ivre et ivre, nous nous réveillons jour après jour et les fleurs fleurissent et tombent année après année.
J'aimerais pouvoir mourir dans ma vieillesse et passer mon temps à boire du vin, plutôt que de m'incliner devant ma voiture.
Les voitures, la poussière et les chevaux suffisent aux riches, et les coupes de vin et les branches suffisent aux pauvres.
Si l’on compare les riches et les nobles aux pauvres et aux humbles, l’un est sur terre et l’autre est dans le ciel.
Si les fleurs et le vin étaient comparés aux chars et aux chevaux, il devrait conduire et je n'aurais rien à faire.
Les autres se moquent de moi parce que je suis fou, mais je me moque des autres parce qu’ils ne voient pas clair.
Il n'y a pas de tombes des héros des Cinq Tombeaux, et il n'y a pas de fleurs ni de vin pour cultiver les champs.
</pre>
<a href="javascript:closeDiv()" >Fermer</a>
</div>
<div id="bg" style="display:none;z-index:100;"></div>
<br/><br/><br/><br/><br/><br/><br/>
<a href="javascript:showDiv('popDiv')" style="font-size:20px;margin-left:100px">Apparaître</a>
</CORPS>
</HTML>