仿XP关机效果的弹出窗口功能

最新推荐文章于 2021-08-01 00:10:54 发布
最新推荐文章于 2021-08-01 00:10:54 发布
阅读量113 收藏
点赞数
分类专栏： js 文章标签： XP IE HTML
<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> 
</body> 
</html> 

 

html+css+js实现XP WINDOW界面
03-31
html+css+js+xp实现的xp window简易界面，代码附有详细的解释！
CSS逼真仿XP系统菜单
05-12
内容索引:脚本资源,CSS特效,XP菜单,折叠菜单　　很漂亮的仿系统折叠菜单，CSS+JavaScript实现，老外网站的东西，很值得研究一番，用到你的网页上绝对漂亮。菜单中可以显示图标，就和系统一模一样。
仿XP关机效果的弹出窗口（JS+样式实现）
aiqixiao2017的博客
02-16 133
<!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> ...
XP Menu 仿QQ菜单、仿XP资源管理器左侧菜单
06-08
javascript---XP Menu 仿QQ菜单、仿XP资源管理器左侧菜单
javascript仿XP关机效果的弹出窗口功能
paolei的笔记
05-16 625
1.http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml">        html,body{font-size:12px;margin:0px;height:100%;}  .mesWindow{border:#666 1px solid;background:#fff
xp按关机关机窗口弹出超慢
weixin_34343689的博客
05-28 103
方法一： HKEY_CURRENT_USER\Control Panel\Desktop，在右边找到AutoEndTasks项，把它的值改为1试试看，我遇到过好多台机子都是这样搞定的 把windows 自动更新关闭掉就可以了。 服务----automaticupdates----属性----常规----启动类型改为手动并点击停止键 方法二：...
xp关机时询问对计算机做什么,XP关机的六个方法
weixin_35551678的博客
08-01 704
关闭Windows XP系统你都用什么方法呢？在“开始”菜单下选择“关闭计算机”程序，使用“关闭”功能吗？这是一个不错的办法，大家都会使用，而且操作也很安全。但你想过有其他办法也可以安全的关闭计算机吗？要知道，有很多办法都可以关闭你的计算机系统，而且快速有趣，下面笔者收集了一些，供大家参考。一、将电源按钮智能化在键盘中按“Power”键，可以很快地将计算机关闭，这实际上是通过直接关闭计算机的电源实...
windows xp 自动弹出outlook 窗口的问题
goobycle
10-31 2420
在“工具”->“internet 选项”->"程序"，接收邮件的的选项里可以选择接收邮件的邮箱，有时候装了xp后，不管你在这里选择什么都会经常弹出无数窗口（如outlook express，homail）。烦不胜烦。最近在网上消耗到了相关的解决办法，个人觉得第一种不错。 （1）新增/移除windosw组件中把outlook express前面的勾去掉，如果用的话再重装outlook。 （2）“
基于CSS+JavaScript实现的很漂亮的CSS逼真仿XP系统折叠菜单
01-13
很漂亮的仿系统折叠菜单，CSS+JavaScript实现，老外网站的东西，很值得研究一番，用到你的网页上绝对漂亮。菜单中可以显示图标，就和系统一模一样。
WIN7系统，XP系统让电脑关机时弹出提醒框提醒打卡.docx
09-08
通过上述方法，我们可以在Windows XP及Windows 7系统上实现在关机或注销时弹出提醒框的功能。这对于提醒员工完成重要操作如打卡等非常有用。虽然Windows 7在开机时执行脚本方面存在限制，但注销时的提醒同样能够满足...
模拟XP关机风格的JavaScript弹出窗口实现
最后，函数会动态创建一个新的`<div>`元素，并设置其样式、内容以及位置，从而展示出仿XP关机效果的弹出窗口。 整个过程强调了用户体验和跨浏览器兼容性，使开发者能够轻松地在网页上复现Windows XP时代的经典关机...
JQ实现效果：滑动隐藏&滑动显示
xin9910的博客
07-14 3293
CHAR 4.2.2 .content{ display: none; } //滑动显示，滑动隐藏 $(function(){ $("#panel h3.head").click(function(){ $(this).next().slideToggle(300); }) }) head body is cont
AJAX设计模式之Lightbox
weixin_30418341的博客
08-09 93
Lightbox JS 典型也是最常见的一个，目前2.0 版，不过似乎只能显示图片而已。ThickBox 这个也是很常见，可以显示图片、网页，并且可指定方框的大小，推荐。Greased Lightbox 提供装在浏览器的扩充套件，平常看图片时就会有 Lightbox 效果。GreyBox 这个就厉害了，除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。L...
中层管理者的必备素质.doc
最新发布
08-07
中层管理者的必备素质.doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值