快捷導(dǎo)航

javascript仿XP關(guān)機(jī)效果的彈出窗口功能

更新時(shí)間：2007年10月09日 21:38:55 作者：

不管是做網(wǎng)站還是一些應(yīng)用系統(tǒng)，都免不了要用到一些彈出的效果，在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了網(wǎng)絡(luò)上比較流行的仿XP關(guān)機(jī)效果的彈出功能，按目前的反應(yīng)來(lái)說(shuō)還是效果不錯(cuò)的，下面將此功能整一下兒，如果有需要大家可以直接使用到自己的網(wǎng)站或是應(yīng)用系統(tǒng)中去。
　　　不在詳細(xì)的說(shuō)明代碼了，帖出代碼之前需要說(shuō)明一點(diǎn)兒的是IE環(huán)境下，由于下拉框（select元素）優(yōu)先級(jí)太高了，彈出的div元素?zé)o法蓋住下拉框元素，很煩人的一個(gè)IE的BUG（個(gè)人認(rèn)為是BUG　^o^），我使用的方法是在彈出時(shí)隱藏掉頁(yè)面中全部的select元素，而關(guān)系窗口時(shí)讓其再顯示出來(lái)。呵呵，方法比較笨，但實(shí)在想不出來(lái)更好的辦法了。。。
這里帖出兩種效果，第一種是彈出時(shí)頁(yè)面背景直接變?yōu)榘胪该鳎诙N則對(duì)XP關(guān)機(jī)效果仿得更像一點(diǎn)兒，即背景是有一個(gè)逐漸變?yōu)榘胪该鞯倪^(guò)程，大家可以留心觀察兩種效果的區(qū)別,兩種效果全部通過(guò)了IE6和firefox的測(cè)試。
第一種：

<!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:pointer;text-decoration:underline;background:#fff}  </style>    </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><option>下拉</option></select>彈出窗口時(shí)會(huì)將其隱藏，關(guān)閉時(shí)會(huì)讓其顯示，目的是在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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

第二種（注意彈出背景逐漸變?yōu)榘胪该鞯倪^(guò)程）：

<!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:pointer;text-decoration:underline;background:#fff}  </style>    </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>彈出窗口時(shí)會(huì)將其隱藏，關(guān)閉時(shí)會(huì)讓其顯示，目的是在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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: