The parent page shows the mask layer pop up dialog in translucent state

2020-03-30 02:13:27
OfStack

In the previous chapter, I showed you that some area editing modules can be added to a masked page. In this chapter, I will show you that the parent page displays a mask layer that pops up a translucent dialog. Dialog is the popup subpage, div.

The effect drawing is as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403041010252.gif? 201424101040 ">
The specific code is 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; 
margin-top:-60px!important; 
margin-top:0px; 
position:fixed!important; 
position:absolute; 
_top: expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); 
} 
.bg,.popIframe { 
background-color: #666; display:none; 
width: 100%; 
height: 100%; 
left:0; 
top:20%; 
filter:alpha(opacity=50); 
opacity:0.5; 
z-index:1; 
position:fixed!important; 
position:absolute; 
_top: expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); 
} 
--> 
</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" class="mydiv" style="display:none;"> 
<pre> 
 Peach blossom temple ( Excerpt from zhang xiaosi ) 

 Taohuawu peach blossom, peach flower nunnery under the peach fairy.  
 Peach blossom fairy to plant a peach tree, and pick peach for wine money.  
 Sober only in front of the flower to sit, drunk also to spend the next sleep.  
 Drunkenness awakens day after day, flowers bloom and fall year after year.  

 Wish to die of old age flower wine room, not willing to bow before the horse.  
 The car dust horse foot rich person interest, the wine wine flower branch poor person margin.  

 If the rich than poor, one in the ground in the day.  
 If the flower wine is compared to a chariot, he will drive me free.  

 Others laugh at my crazy, I laugh at others see not wear.  
 See wu ling hero tomb, no flowers no wine hoe for the field.  
</pre> 
<a href="javascript:closeDiv()" > Shut down </a> 

</div> 

<div id="bg" class="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>