Rss订阅

首页 »Javascript教程 » javascript弹出窗口:javascript仿XP关机效果的弹出窗口功能 »正文

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

来源: 发布时间:星期六, 2008年12月27日浏览:168次评论:0

不管是做网站WebSite还是

些应用系统

都免不了要用到

些弹出

效果

在ZJ-BLOG V1.0 Beta2版本我在

些功能使用了网络上比较流行

仿XP关机效果

弹出功能

按目前

反应来说还是效果不错

下面将此功能整

下儿

如果有需要大家可以直接使用到自己

网站WebSite或是应用系统中去

　　　不在详细

介绍说明代码了

帖出代码的前需要介绍说明

点儿

是IE环境下

由于下拉框(select元素)优先级太高了

弹出

div元素无法盖住下拉框元素

很烦人

个IE

BUG(个人认为是BUG　^o^)

我使用

思路方法是在弹出时隐藏掉页面中全部

select元素

而关系窗口时让其再显示出来

呵呵

思路方法比较笨

但实在想不出来更好

办法了

这里帖出两种效果

第

种是弹出时页面背景直接变为半透明

而第 2种则对XP关机效果仿得更像

点儿

即背景是有

个逐渐变为半透明

过程

大家可以留心观察两种效果

区别,两种效果全部通过了IE6和firefox

测试

第

种:
点击运行可以看到效果:

<!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></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:po<img src='/icons/57034int.gif' />er;text-decoration:underline;background:#fff}  
</style>  
  
</head>  
<body>  
  
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]<br/>               
                    <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                    </div>
                </div>
                <div class="tags">
                        标签：<a href="/Tag/71119/Index.html">javascript弹出信息</a> <a href="/Tag/71035/Index.html">javascript弹出页面</a> <a href="/Tag/36750/Index.html">javascript弹出</a> <a href="/Tag/36749/Index.html">javascript弹出窗口</a>                       
                 </div>
                 <div id="plPdf">	
                 <div> <a href="/mypdf/45827.pdf" title="下载 'javascript弹出窗口:javascript仿XP关机效果的弹出窗口功能' 的PDF电子版" style="color: #ff6600;  font-size: 14px; font-weight: bold;">下载文章的 PDF文档电子版 离线看</a></div>                 
</div>
                <div class="diggdiv">
                    <div id="digg52777" class="diggbox">
                        <div class="diggnum">0</div>
                        <div class="digglink">
                            <a href="javascript:dig(45827);">我顶</a>
                        </div>
                    </div>
                    <div class="prevnext">                 
                        <div>
                        <input type="hidden" id="txtArtTitle" name="txtArtTitle" value="javascript弹出窗口:javascript仿XP关机效果的弹出窗口功能" />
                        <input type="text" id="txtArtUrl" onclick="copy(this)" style="width:300px" value="http://CrazyCoder.cn/Javascript/Article45827.html" /><input type="button" onclick="copy()" value="复制网址" /></div>
                    </div>
                </div>
                <div class="clear"></div>
               
            </div>
          
            <div class="title-y">               
                <h3>相关文章</h3>
            </div>
            <div class="list-y">
                <ul class="list">
                        <li><a href="/Javascript/Article44759.html" target="_blank">javascript显示层:javascript用层模拟可移动的小窗口</a></li>
<li><a href="/Javascript/Article44999.html" target="_blank">javascript效果:JavaScript 渐变效果页面图片控制</a></li>
<li><a href="/Javascript/Article45055.html" target="_blank">javascript弹出:javascript弹出一个层并增加一个覆盖层</a></li>
<li><a href="/Javascript/Article45887.html" target="_blank">javascript页面跳转:超棒的javascript页面顶部卷动广告效果</a></li>
<li><a href="/Javascript/Article62744.html" target="_blank">javascript弹出层:JavaScript 弹出层效果</a></li>
<li><a href="/Javascript/Article22922.html" target="_blank">javascript刷新页面:JavaScript页面刷新与弹出窗口问题解决方法</a></li>
<li><a href="/Javascript/Article22511.html" target="_blank">javascript事件:javascript捕获窗口关闭事件</a></li>
<li><a href="/Javascript/Article22501.html" target="_blank">javascript弹出窗口:用JavaScript制作多彩的弹出式说明窗口</a></li>
<li><a href="/Javascript/Article65646.html" target="_blank">javascript弹出窗口:javascript弹出窗口问题整理总结</a></li>

</ul>
            </div>
            <div class="title-y">               
                <h3>读者评论</h3>
            </div>
            <div class="list-y">
                <ul class="listcmt">
                                                        
                </ul>
            </div>
            <div class="title-y">               
                <h3>发表评论</h3>

</div>
            <form id="formCmt"  method="post" onsubmit="return saveComment();">
            <div class="list-y">                
                <ul class="list">
                    <li>昵称：<input type="text" id="txtUserName" name="txtUserName" /><input type="hidden" id="txtArticleID" value="45827" /></li>                    
                    <li>内容：<textarea id="txtContent" name="txtContent">

专注于互联网--专注于架构

首页 »Javascript教程 » javascript弹出窗口:javascript仿XP关机效果的弹出窗口功能 »正文

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

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章