JavaScript实现弹出DIV层同时页面背景渐变成半透明效果


Posted in Javascript onMarch 25, 2016

本文实例讲述了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript弹出DIV层,页面背景渐变成半透明</title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//让背景渐渐变暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:left;padding-left:20px;padding-top:10px";><select ID="Select1" NAME="Select1"><option>下拉</option></select>弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框</div>
<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
</div>
<br />
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript修改作用域外变量的方法
Mar 25 #Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 #Javascript
JavaScript入门系列之知识点总结
Mar 24 #Javascript
JS实现支持Ajax验证的表单插件
Mar 24 #Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 #Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 #Javascript
js+css实现select的美化效果
Mar 24 #Javascript
You might like
PHP 获取ip地址代码汇总
2015/07/05 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Python实现随机选择元素功能
2017/09/14 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
django rest framework 过滤时间操作
2020/07/12 Python
浅析Python 序列化与反序列化
2020/08/05 Python
聊聊python中的循环遍历
2020/09/07 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
田径运动会开幕式及主持词
2014/03/28 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
在职证明格式样本
2015/06/15 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python中request的基本使用解决乱码问题
2022/04/12 Python