`
HUYIZIZHEN
  • 浏览: 114154 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js弹出小窗口 背景渐变暗

htmlwebjavascript 
阅读更多 
<!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><a href="/Web/Wysj/Html_JS/" class="innerlink">网页</a>中弹出小窗口,页面背景逐渐变为半透明-ityoudao.com</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:35px;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:#111;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:10%;'><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'>消息正文-IT有道网不以数量以质量，尽量发布高质量的软文</div>";
showMessageBox('友情提示',messContent,objPos,350);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></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><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>
</body>
</html>

注：代码转自http://www.ityoudao.com/Web/Cktx_631_796.html
分享到：
| CSS按钮制作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js特效，各种页面弹出浮动

    点击弹出窗口层，并且背景变暗渐变.htm 设定时间弹出窗口.htm 打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示，刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口....

    JS实现点击登录弹出窗口同时背景色渐变动画效果

    本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果。分享给大家供大家参考，具体如下： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;...

    javascript网页特效实例大全（13-19）

    实例357　关闭弹出窗口时刷新父窗口　574 实例358　打开新窗口显示详细信息　575 实例359　弹出网页模式对话框　577 实例360　日期选择器　580 实例361　弹出提示对话框并重定向网页　584 实例362　打开指定大小的新...

    JavaScript网页特效范例宝典源码

    1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...

    jQuery 渐变居中弹出框，超炫淡入淡出

    内容索引:脚本资源,jQuery,弹出框　核心基于jQuery的渐变弹出框，弹出在网页的正中间，具有超炫淡入淡出效果，可以看到jQuery实在是非常强大，我们仅需少量的CSS和JavaScript代码即可完成这一效果。我们可以在这个...

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

    主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下

    JavaScript实用范例词典04-14

    5.42 允许调整弹出窗口的大小... 143 5.43 弹出一个顶层窗口... 144 5.44 关闭窗口... 145 5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 ...

    程序天下:JavaScript实例自学手册

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    《程序天下：JavaScript实例自学手册》光盘源码

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    javascript网页特效实例大全

    9.8 自动弹出的窗口 241 9.9 自动消失的广告窗口 242 9.10 窗口的震动效果 243 9.11 同时打开10个窗口 244 9.12 检测系统信息窗口 245 9.13 测试链接速度的窗口 248 9.14 关闭窗口打开收藏夹 250 9.15 关闭...

    Dreamweaver 扩展

    MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口，亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果，比如从中间打开、...

    artDialog_Demo

    18、修复一处隐秘BUG：当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口 (因为此时焦点在对话框关闭链接上，这个快捷键让很多浏览器新建窗口) 19、重新绘制'earo'皮肤，修复毛边的问题 20、修复拖动的时候...

    70款经典Dreamweaver插件

    MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口，亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果，比如从中间打开、...

    Dreamweaver 插件集

    弹出窗口(窗口居中、总在最前面、自动关闭、全屏、无边框窗口) averagedistribute 单元格平均分布 Quick_Title 建立文字型的Title说明 Open_Browser_Window+ 操作弹出式窗口升级版 StyleApplier 表格的鼠标触发效果 ...

    JavaScript应用177例

    32.7.htm 一直弹出新窗口 第33章（\cha33） 代码说明： 1.代码33.1.htm须使用IE浏览器打开 2.代码33.2.htm须使用Mozilla Firefox浏览器打开 33.1.htm 使用IE处理XML 33.2.htm 使用...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...

    frontend-internship-test:前端实习招聘考试

    任务1 单击“单击我”按钮后，应显示带有登录表单的弹出窗口。 添加HTML代码并根据设计对其进行样式设置。 请注意，该弹出窗口应具有一个正常的关闭按钮。任务2 向之前创建的表单添加简单的JS验证。 提交按钮应具有...

Magicbox
Global site tag (gtag.js) - Google Analytics