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


Posted in Javascript onMarch 04, 2014

上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog。dialog即弹出的子页面,div。

效果图如下:
父页面显示遮罩层弹出半透明状态的dialog 
具体代码实现如下:

<!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>
Javascript 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 #Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 #Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 #Javascript
js判断url是否有效的两种方法
Mar 04 #Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 #Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 #Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 #Javascript
You might like
PHP文件读写操作相关函数总结
2014/11/18 PHP
php HTML无刷新提交表单
2016/04/05 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
python操作mysql代码总结
2018/06/01 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
django修改models重建数据库的操作
2020/03/31 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
分公司经理岗位职责
2013/11/11 职场文书
学术诚信承诺书
2014/05/26 职场文书
集体生日活动方案
2014/08/18 职场文书
胡桃夹子观后感
2015/06/11 职场文书
导游词之安徽九华山
2019/09/18 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript