父页面显示遮罩层弹出半透明状态的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 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
深入理解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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
异步加载script的代码
2011/01/12 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Python序列操作之进阶篇
2016/12/08 Python
python 构造三维全零数组的方法
2018/11/12 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python实现海螺图片的方法示例
2019/05/12 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
2015年车间管理工作总结
2015/07/23 职场文书
证婚人致辞精选
2015/07/28 职场文书
小学生教师节广播稿
2015/08/19 职场文书
初二物理教学反思
2016/02/19 职场文书