父頁(yè)面顯示遮罩層彈出半透明狀態(tài)的dialog
更新時(shí)間：2014年03月04日 10:10:33 作者：
本文為大家介紹下父頁(yè)面顯示遮罩層，彈出半透明狀態(tài)的dialog。dialog即彈出的子頁(yè)面,需要的朋友可以參考下
上一章我介紹了遮罩的頁(yè)面可增加部分區(qū)域編輯模塊，這章將介紹父頁(yè)面顯示遮罩層，彈出半透明狀態(tài)的dialog。dialog即彈出的子頁(yè)面，div。
效果圖如下：
具體代碼實(shí)現(xiàn)如下：
<!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);/* chabaoo.cn 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>
桃花庵(張小四摘錄)
桃花塢里桃花庵，桃花庵下桃花仙。
桃花仙人種桃樹，又摘桃花換酒錢。
酒醒只在花前坐，酒醉還來(lái)花下眠。
酒醉酒醒日復(fù)日，花開花落年復(fù)年。
但愿老死花酒間，不愿鞠躬車馬前。
車塵馬足富者趣，酒盞花枝貧者緣。
若將富貴比貧賤，一在平地一在天。
若將花酒比車馬，他得驅(qū)馳我得閑。
別人笑我忒瘋癲，我笑他人看不穿。
不見五陵豪杰墓，無(wú)花無(wú)酒鋤作田。
</pre>
<a href="javascript:closeDiv()" >關(guān)閉</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">出現(xiàn)</a>
</BODY>
</HTML>
效果圖如下：
具體代碼實(shí)現(xiàn)如下：
復(fù)制代碼 代碼如下:
<!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);/* chabaoo.cn 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>
桃花庵(張小四摘錄)
桃花塢里桃花庵，桃花庵下桃花仙。
桃花仙人種桃樹，又摘桃花換酒錢。
酒醒只在花前坐，酒醉還來(lái)花下眠。
酒醉酒醒日復(fù)日，花開花落年復(fù)年。
但愿老死花酒間，不愿鞠躬車馬前。
車塵馬足富者趣，酒盞花枝貧者緣。
若將富貴比貧賤，一在平地一在天。
若將花酒比車馬，他得驅(qū)馳我得閑。
別人笑我忒瘋癲，我笑他人看不穿。
不見五陵豪杰墓，無(wú)花無(wú)酒鋤作田。
</pre>
<a href="javascript:closeDiv()" >關(guān)閉</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">出現(xiàn)</a>
</BODY>
</HTML>
相關(guān)文章
JQueryiframe頁(yè)面操作父頁(yè)面中的元素與方法(實(shí)例講解)
這篇文章主要是對(duì)JQueryiframe頁(yè)面操作父頁(yè)面中的元素與方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了淺談jQuery的offset()方法及示例分享的相關(guān)資料,需要的朋友可以參考下2015-07-07
jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對(duì)于一系列需要按次序運(yùn)行的函數(shù)特別有用。特別animate動(dòng)畫，ajax，以及timeout等需要一定時(shí)間的函數(shù)2014-03-03
jquery本身的動(dòng)畫較之mootools，總體上感覺稍微有點(diǎn)遜色，不過(guò)因?yàn)槠溆袕?qiáng)大的插件，加上API易讀型，易用性等備受青睞，在動(dòng)畫效果方面，API提供了比如一些比較實(shí)用的Effects，下面是main方法animate2011-04-04
jQuery動(dòng)畫效果相關(guān)方法實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)畫效果相關(guān)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)動(dòng)畫效果所用到的常見方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-12-12
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請(qǐng)求時(shí)，總是喜歡使用jQuery+ashx的方式進(jìn)行調(diào)用，今天采取jQuery+WebService的方法來(lái)做ajax請(qǐng)求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03
jQuery實(shí)現(xiàn)的Email中的收件人效果（按del鍵刪除）
基于jquery實(shí)現(xiàn)的Email中的收件人效果，可通過(guò)del鍵刪除，需要的朋友可以參考下。2011-03-03
放棄用你的InnerHTML來(lái)輸出HTML吧 jQuery Tmpl不詳細(xì)講解
在Ajax橫道的今天，我們?cè)陧?yè)面交互上有了更高的要求，動(dòng)態(tài)生成HTML毫無(wú)疑問(wèn)是其中的一種。動(dòng)態(tài)生成HTML的方式多種多樣，最終通過(guò)一定的方法輸出給用戶innerHTML、documentWrite等方式2013-04-04
jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-11-11
jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼,需要的朋友可以參考下2014-02-02