JavaScript开发中父页面显示遮罩层弹出半透明状态的dialog
之前有介绍了遮罩的页面可增加部分区域编辑模块，这章将介绍父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面，p。
效果图如下：
具体代码实现如下：
. 代码如下:
<!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">
<!--
.myp {
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 该值为本身宽的一半 */
margin-top:-60px!important;/*ff ie7 该值为本身高的一半*/
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.codefans.net 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>
<p id="popdiv" class="myp" style="display:none;">
<pre>
桃花庵(张小四摘录)
桃花坞里桃花庵，桃花庵下桃花仙。
桃花仙人种桃树，又摘桃花换酒钱。
酒醒只在花前坐，酒醉还来花下眠。
酒醉酒醒日复日，花开花落年复年。
但愿老死花酒间，不愿鞠躬车马前。
车尘马足富者趣，酒盏花枝贫者缘。
若将富贵比贫贱，一在平地一在天。
若将花酒比车马，他得驱驰我得闲。
别人笑我忒疯癫，我笑他人看不穿。
不见五陵豪杰墓，无花无酒锄作田。
</pre>
<a href="javascript：closediv()" >关闭</a>
</p>
<p id="bg" class="bg" style="display:none;z-index:100;"></p>
<br/><br/><br/><br/><br/><br/><br/>
<a href="javascript：showdiv('popdiv')" style="font-size:20px;margin-left:100px">出现</a>
</body>
</html>