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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
JavaScript中继承原理与用法实例入门
May 09 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产生动态的影像图
2006/10/09 PHP
php empty函数 使用说明
2009/08/10 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vue实现购物车列表
2020/06/30 Javascript
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
公务员更新知识培训实施方案
2014/03/31 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
小学亲子活动总结
2014/07/01 职场文书
兽医医药专业求职信
2014/07/27 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js