javascript实现的弹出层背景置灰-模拟(easyui dialog)


Posted in Javascript onDecember 27, 2013

页面比较丑,只把功能实现了。^ ^

<title>模仿easyui dialog的效果</title> 
<script> 
//取得页面元素 
var getElement = function() { 
return document.getElementById(arguments[0]) || false; 
} 
function openDialog(dialogId) { 
var maskId = "mask"; 
//如果有,先删除原来的 
if (getElement(dialogId)) { 
document.removeChild(getElement(dialogId));//删除操作:弹出的div 
} 
if (getElement(maskId)) { 
document.removeChild(getElement(maskId));//删除操作:弹出的不可操作(面具)层 
} //背景置灰 
var maskDiv = document.createElement("div"); 
maskDiv.id = maskId; 
maskDiv.style.position = "absolute"; 
maskDiv.style.zIndex = "1"; 
maskDiv.style.width = document.body.scrollWidth + "px"; 
maskDiv.style.height = document.body.scrollHeight + "px"; 
maskDiv.style.top = "0px"; 
maskDiv.style.left = "0px"; 
maskDiv.style.background = "gray"; 
maskDiv.style.filter = "alpha(opacity=10)"; 
maskDiv.style.opacity = "0.30";//透明度 
document.body.appendChild(maskDiv);//向body之中增加背景层 
//Dialog 
var dialogDiv = document.createElement("div"); 
dialogDiv.id = dialogId; 
dialogDiv.style.position = "absolute"; 
dialogDiv.style.zIndex = "9999"; 
dialogDiv.style.width = "400px"; 
dialogDiv.style.height = "200px"; 
dialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // 屏幕居中 
dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕居中 
dialogDiv.style.background = "white"; 
dialogDiv.style.border = "1px solid gray"; 
dialogDiv.style.padding = "5px"; 
dialogDiv.innerHTML = "(Dialog Content)"; 
//Dialog之中的关闭操作:关闭背景层和Dialog层 
var closeControlloer = document.createElement("a");//创建一个超链接(做为关闭的触发) 
closeControlloer.href = "#"; 
closeControlloer.innerHTML = "关闭"; 
closeControlloer.onclick = function() { 
document.body.removeChild(getElement(dialogId));//删除diaglog 
document.body.removeChild(getElement(maskId));//删除背景层 
} 
dialogDiv.appendChild(closeControlloer);//dialog之中增加"关闭"操作 
document.body.appendChild(dialogDiv);//body之中增加dialog 
} 
</script> 
<a href="#" onclick="openDialog('dialog');">Open Dialog</a>

javascript实现的弹出层背景置灰-模拟(easyui dialog)
Javascript 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 #Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 #Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 #Javascript
Java/JS获取flash高宽的具体方法
Dec 27 #Javascript
location.href用法总结(最主要的)
Dec 27 #Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 #Javascript
JS去除字符串两端空格的简单实例
Dec 27 #Javascript
You might like
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python如何将图片转换素描画
2020/09/08 Python
python实现登录与注册系统
2020/11/30 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
车间班组长的职责
2013/12/13 职场文书
表演方阵解说词
2014/02/08 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
演讲稿格式
2014/04/30 职场文书
西柏坡导游词
2015/02/05 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
企业法律事务工作总结
2015/08/11 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server