JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
作者:沧海小强 发布时间:2024-04-30 10:09:27
标签:JavaScript,弹出DIV层,页面背景,渐变
本文实例讲述了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程序设计有所帮助。
0
投稿
猜你喜欢
- 一般情况下,mysql会默认提供多种存储引擎,可以通过下面的查看:1)查看mysql是否安装了innodb插件。通过下面的命令结果可知,已经
- 前言plt.show()展示图片的时候,截图进行保存,图片不是多么清晰如何保存高清图也是一知识点函数包名:import matplotlib
- 首先 你要有个女朋友效果:需要安装几个包pip install wxpypip install wechat_senderpip insta
- 我们在写代码的过程中,会经常使用到for循环,去循环列表,那么如果我们拿到一个类型为str的列表,对它进行for循环,结果看下面的代码和图:
- 1、DOMWEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENTOBJEC
- 首先是抓包,使用scapy模块,sniff()函数 在其中参数为本地文件路径时,操作为打开本地文件若参数为BPF过滤规则和回调函数,则进行S
- #Filename:brn.py #Description: batch replace certain words in file nam
- Ping服务ping 是基于 XML_RPC 标准协议的更新通告服务,用于Blog把内容更新快速通知给搜索引擎,以便搜索引擎及时进行抓取和更
- 导语:举例:Python做一个根据后缀名整理文件的工具,先来看看效果:自动整理前:自动整理后:这样看起来就好很多了。1.准备开始之前,你要确
- 1、单个关键字加亮代码: <div id="txt"> 用JS让文章内容指定
- python 封装tokenimport datetimeclass MyJwt:def __init__(self): &n
- Numpy学习1 Numpy 介绍与应用1-1Numpy是什么NumPy 是一个运行速度非常快的数学库,一个开源的的python科学计算库,
- CASSolution使用CAS作为认证协议。A作为主要的认证提供方(provider)。A保留用户系统,其余系统如xxx/www不保留用户
- 安装jieba库教程jieba库是一款优秀的 Python 第三方中文分词库,jieba 支持三种分词模式:精确模式、全模式和搜索引擎模式,
- /** * The maximum supported {@code LocalTime}, '23:59:59.999999999
- (1)更有意义的搜索 数据可被XML唯一的标识。没有XML,搜索软件必须了解每个数据库是如何构建的。这实际上是不可能的,因为每个数据库描述数
- 我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边
- 在python3中按数据类型的可变与不可变大致分为如下几种类型:不可变数据(3个):Number(数字)、String(字符串)、Tuple
- 欢欢喜喜辞旧岁 🐰🐰🐰辞旧迎新之际,来 AI Studio 一起 #欢喜迎兔年# !分享不同新年风俗,共享一段快乐时光!🐰🐰🐰p>下面
- 一、什么是Django ContentTypes?Django ContentTypes是由Django框架提供的一个核心功能,它对当前项目