源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 276|回复: 22

[JavaScript] 父页面显示遮罩层弹出半透明状态的dialog

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-3-4 10:10:33 | 显示全部楼层 |阅读模式
本文为大家介绍下父页面显示遮罩层,弹出半透明状态的dialog。dialog即弹出的子页面,需要的朋友可以参考下 上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的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);/* www.jb51.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>
<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>
回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-20 13:05:50 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-3 11:46:26 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

66

积分

注册会员

Rank: 2

积分
66
发表于 2023-9-27 14:42:06 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2023-10-14 21:28:53 | 显示全部楼层
1312315458748777
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2023-11-19 15:22:49 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2024-2-28 19:13:41 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-6 01:45:13 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2024-6-14 04:36:55 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-8-12 18:12:44 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 00:05 , Processed in 0.076602 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表