父页面显示遮罩层弹出半透明状态的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实现限制上传文件大小
Feb 06 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
新52大事件
2020/03/03 欧美动漫
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
提升PHP速度全攻略
2006/10/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
工作态度检讨书
2014/02/11 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
村抢险救灾方案
2014/05/09 职场文书
产品质量保证书范本
2015/02/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL