En el capítulo anterior, presenté que se puede agregar un módulo de edición de área parcial a la página enmascarada. En este capítulo, presentaré la página principal para mostrar la capa de máscara y abriré un cuadro de diálogo semitransparente. El diálogo es la subpágina emergente, div.
Las representaciones son las siguientes:
La implementación del código específico es la siguiente:
Copie el código de código de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transicional//ES">
<HTML>
<CABEZA>
<TITLE> Nuevo documento </TITLE>
<META NAME="Generador" CONTENT="EditPlus">
<META NOMBRE="Autor" CONTENIDO="">
<META NOMBRE="Palabras clave" CONTENIDO="">
<META NOMBRE="Descripción" CONTENIDO="">
</CABEZA>
<tipo de estilo="texto/css">
<!--
.mydiv {
color de fondo: #FFFFFF;
borde: 5px sólido #c7c7c7;
alineación de texto: centro;
altura de línea: 20px;
tamaño de fuente: 12px;
peso de fuente: negrita;
índice z: 999;
ancho: 500 px;
altura: 300 píxeles;
izquierda: 50%;
arriba: 50%;
margin-left:-150px!important;/*FF IE7 este valor es la mitad de su propio ancho*/
margin-top:-60px!important;/*FF IE7 Este valor es la mitad de su altura*/
margen superior: 0px;
posición:fija!importante;/* FF IE7*/
posición:absoluta;/*IE6*/
_top: expresión(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 {
color de fondo: #666; pantalla: ninguna;
ancho: 100%;
altura: 100%;
izquierda: 0;
arriba:20%;/*FF IE7*/
filtro:alfa(opacidad=50);/*IE*/
opacidad:0.5;/*FF*/
índice z: 1;
posición:fija!importante;/*FF IE7*/
posición:absoluta;/*IE6*/
_top: expresión(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*/
}
-->
</estilo>
<guión>
función showDiv(etiqueta,tid,nombreDeAbogado){
var light1=document.getElementById(etiqueta);
light1.style.display='bloque';
document.getElementById('bg').style.display='bloque';
}
función cerrarDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
<CUERPO>
<div id="popDiv" estilo="display:none;">
<pre>
Templo de la Flor de Durazno (extracto de Zhang Xiaosi)
Hay un Templo de la Flor de Melocotón en Taohuawu y un Hada de la Flor de Melocotón debajo del Templo de la Flor de Melocotón.
El Hada de la Flor del Melocotón plantó melocotoneros y recogió flores de durazno a cambio de dinero para el vino.
Cuando estoy sobrio, simplemente me siento frente a las flores; cuando estoy borracho, me acuesto bajo las flores.
Borrachos y borrachos, nos despertamos día tras día, y las flores florecen y caen año tras año.
Ojalá pudiera morir en mi vejez y pasar el tiempo bebiendo vino, en lugar de inclinarme ante mi carruaje.
Los coches, el polvo y los caballos son suficientes para los ricos, y las copas de vino y las ramas son suficientes para los pobres.
Si se compara a los ricos y a los nobles con los pobres y los humildes, uno está en la tierra y el otro en el cielo.
Si las flores y el vino se compararan con carros y caballos, él tendría que conducir y yo no tendría nada que hacer.
Otros se ríen de mí por estar loco, pero yo me río de los demás porque no pueden verlo.
No hay tumbas de los héroes de las Cinco Tumbas, y no hay flores ni vino para cultivar los campos.
</pre>
<a href="javascript:closeDiv()" >Cerrar</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">Aparecer</a>
</CUERPO>
</HTML>