No capítulo anterior, apresentei que um módulo de edição de área parcial pode ser adicionado à página mascarada. Neste capítulo, apresentarei a página pai para exibir a camada de máscara e abrir uma caixa de diálogo semitransparente. A caixa de diálogo é a subpágina pop-up, div.
As renderizações são as seguintes:
A implementação específica do código é a seguinte:
Copie o código do código da seguinte forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<CABEÇA>
<TITLE> Novo documento </TITLE>
<META NAME="Gerador" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="">
<META NAME="Palavras-chave" CONTENT="">
<META NAME="Descrição" CONTENT="">
</HEAD>
<style type="texto/css">
<!--
.meudiv {
cor de fundo: #FFFFFF;
borda: 5px sólido #c7c7c7;
alinhamento de texto: centro;
altura da linha: 20px;
tamanho da fonte: 12px;
peso da fonte: negrito;
índice z:999;
largura: 500px;
altura: 300px;
esquerda:50%;
superior:50%;
margin-left:-150px!important;/*FF IE7 este valor é metade de sua própria largura*/
margin-top:-60px!important;/*FF IE7 Este valor é metade de sua altura*/
margem superior:0px;
posição:fixo!importante;/* FF IE7*/
posição:absoluta;/*IE6*/
_top: expressão(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 {
cor de fundo: #666;
largura: 100%;
altura: 100%;
esquerda:0;
topo:20%;/*FF IE7*/
filtro:alfa(opacidade=50);/*IE*/
opacidade:0,5;/*FF*/
índice z:1;
posição:fixo!importante;/*FF IE7*/
posição:absoluta;/*IE6*/
_top: expressão(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>
<roteiro>
function showDiv(tag,tid,NomeAdvogado){
var light1=document.getElementById(tag);
light1.style.display='bloquear';
document.getElementById('bg').style.display='bloco';
}
função closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
<CORPO>
<div id="popDiv" style="display:none;">
<pré>
Templo da Flor de Pessegueiro (trecho de Zhang Xiaosi)
Há um Templo da Flor de Pessegueiro em Taohuawu e uma Fada da Flor de Pessegueiro sob o Templo da Flor de Pessegueiro.
A Fada da Flor de Pessegueiro plantou pessegueiros e colheu flores de pessegueiro em troca de dinheiro para vinho.
Quando estou sóbrio, simplesmente sento-me em frente às flores; quando estou bêbado, vou dormir debaixo das flores.
Bêbados e bêbados, acordamos dia após dia e as flores desabrocham e caem ano após ano.
Eu gostaria de poder morrer na velhice e passar meu tempo bebendo vinho, em vez de me curvar diante da minha carruagem.
Carros, poeira e cavalos bastam para os ricos, e taças de vinho e galhos são suficientes para os pobres.
Se compararmos os ricos e os nobres com os pobres e os humildes, um está na terra e o outro no céu.
Se flores e vinho fossem comparados a carruagens e cavalos, ele teria que dirigir e eu não teria nada para fazer.
Outros riem de mim por ser louco, mas eu rio dos outros porque eles não conseguem enxergar isso.
Não há tumbas de heróis das Cinco Tumbas e não há flores ou vinho para cultivar os campos.
</pré>
<a href="javascript:closeDiv()" >Fechar</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>
</BODY>
</HTML>