仿XP關機效果的彈出窗口功能

DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 仿XP關機效果的彈出窗口功能

仿XP關機效果的彈出窗口功能

編輯：Dreamweaver相關

不管是做網站還是一些應用系統，都免不了要用到一些彈出的效果，在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了網絡上比較流行的仿XP關機效果的彈出功能，按目前的反應來說還是效果不錯的，下面將此功能整一下兒，如果有需要大家可以直接使用到自己的網站或是應用系統中去。

　　　不在詳細的說明代碼了，帖出代碼之前需要說明一點兒的是IE環境下，由於下拉框（select元素）優先級太高了，彈出的div元素無法蓋住下拉框元素，很煩人的一個IE的BUG（個人認為是BUG　^o^），我使用的方法是在彈出時隱藏掉頁面中全部的select元素，而關系窗口時讓其再顯示出來。呵呵，方法比較笨，但實在想不出來更好的辦法了。。。這裡帖出兩種效果，第一種是彈出時頁面背景直接變為半透明，而第二種則對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: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=40);":"opacity:0.40;"; 
 back.style.cssText=styleStr; 
 document.body.appendChild(back); 
 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</p><b>1234下一頁 </b>

上一頁:dreamweaver制作隱藏邊框表格
下一頁:dreamweaver中美化按鈕

Dreamweaver相關

DreamweaverMX 2004打造細線表格: 如果僅僅是定義表格的邊框為1(bor
Dreamweaver設置頁面屬性後采用HTML格式怎麼辦?: Dreamweaver在“ 頁面屬性” 對話框的此類別中設置屬性會導致頁面采
Dreamweaver制作網頁技巧之對進行網頁優化: 我們為了優化網頁、加快網頁下載速度，除了對圖片進行優化之外，還需對網頁其他各個元素進行優化。在網頁編

Dreamweaver入門 Dreamweaver8.0教程 Dreamweaver相關

小編推薦

Dreamweaver MX進階教程：制作反饋表單 Dreamweaver 入門：DW 8 的功能 DW與FW結合使用制作精彩網頁設計網頁前端界面必備的技能玩轉Dreamweaver 8.0之設置段落格式 DW MX新功能試用：頁面模板 Dreamweaver制作網頁之圖片應用技巧玩轉DW8.0：屬性檢查器和文本格式設置 Dreamweaver下拉菜單全攻略 Dreamweaver MX中移動層的使用

DIV CSS 佈局教程網

相關文章