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的文件是什么文件
Dec 06 Javascript
js加解密 脚本解密
Feb 22 Javascript
javascript this用法小结
Dec 19 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JavaScript 不只是脚本
2007/05/30 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
python批量提取word内信息
2015/08/09 Python
python执行使用shell命令方法分享
2017/11/08 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python检查ping终端的方法
2019/01/26 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
部门活动策划方案
2014/08/16 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
运动会新闻稿
2015/07/17 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Python编写冷笑话生成器
2022/04/20 Python