In the previous chapter, I introduced that a partial area editing module can be added to the masked page. In this chapter, I will introduce the parent page to display the mask layer and pop up a semi-transparent dialog. Dialog is the pop-up subpage, div.
The renderings are as follows:
The specific code implementation is as follows:
Copy the code code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
<!--
.mydiv {
background-color: #FFFFFF;
border: 5px solid #c7c7c7;
text-align: center;
line-height: 20px;
font-size: 12px;
font-weight: bold;
z-index:999;
width: 500px;
height: 300px;
left:50%;
top:50%;
margin-left:-150px!important;/*FF IE7 this value is half of its own width*/
margin-top:-60px!important;/*FF IE7 This value is half of its height*/
margin-top:0px;
position:fixed!important;/* FF IE7*/
position:absolute;/*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 {
background-color: #666; display:none;
width: 100%;
height: 100%;
left:0;
top:20%;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*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='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
<BODY>
<div id="popDiv" style="display:none;">
<pre>
Peach Blossom Temple (excerpt by Zhang Xiaosi)
There is a Peach Blossom Temple in Taohuawu, and a Peach Blossom Fairy under the Peach Blossom Temple.
The Peach Blossom Fairy planted peach trees and picked peach blossoms in exchange for wine money.
When I'm sober, I just sit in front of the flowers; when I'm drunk, I come to sleep under the flowers.
Drunk and drunken, we wake up day after day, and flowers bloom and fall year after year.
I wish I could die in my old age and spend my time drinking wine, rather than bow in front of my carriage.
Cars, dust and horses are enough for the rich, and wine-cups and branches are for the poor.
If the rich and the noble are compared to the poor and the humble, one is on the ground and the other is in the sky.
If flowers and wine were compared to chariots and horses, he would have to drive and I would have nothing to do.
Others laugh at me for being crazy, but I laugh at others because they can’t see through it.
There are no tombs of heroes from the Five Tombs, and there are no flowers or wine to cultivate the fields.
</pre>
<a href="javascript:closeDiv()" >Close</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">Appear</a>
</BODY>
</HTML>