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的日期格式化算法示例
Jul 31 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
layer 刷新某个页面的实现方法
Sep 05 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python中正则的使用指南
2016/12/04 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
出纳岗位职责范本
2013/12/01 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年度保密工作总结
2015/04/24 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python