父页面显示遮罩层弹出半透明状态的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对象、属性、事件手册集合方便查询
Jul 04 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
原生js编写2048小游戏
Mar 17 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 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 登录记住密码实现思路
2013/05/07 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php时间戳转换的示例
2014/03/31 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
jquery实现简易验证插件封装
2020/09/13 jQuery
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Django中的用户身份验证示例详解
2019/08/07 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
二手书店创业计划书
2014/01/16 职场文书
关于旷工的检讨书
2014/02/02 职场文书
中学生操行评语
2014/04/24 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
企业挂职心得体会
2014/09/10 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
赞美教师的句子
2019/09/02 职场文书
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android