Posted in Javascript onMarch 04, 2014
上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog。dialog即弹出的子页面,div。
效果图如下:
具体代码实现如下:
<!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 该值为本身宽的一半 */ 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);/* 3water.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" class="mydiv" style="display:none;"> <pre> 桃花庵(张小四摘录) 桃花坞里桃花庵,桃花庵下桃花仙。 桃花仙人种桃树,又摘桃花换酒钱。 酒醒只在花前坐,酒醉还来花下眠。 酒醉酒醒日复日,花开花落年复年。 但愿老死花酒间,不愿鞠躬车马前。 车尘马足富者趣,酒盏花枝贫者缘。 若将富贵比贫贱,一在平地一在天。 若将花酒比车马,他得驱驰我得闲。 别人笑我忒疯癫,我笑他人看不穿。 不见五陵豪杰墓,无花无酒锄作田。 </pre> <a href="javascript:closeDiv()" >关闭</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">出现</a> </BODY> </HTML>
父页面显示遮罩层弹出半透明状态的dialog
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@