web學習-跳出式對話框 使用jQuery

雖然這對話框這東西已經有一大堆現成套件可以用了
但是基於求知的心態還是會想要知道他是怎麼弄的
下面一個自己寫的範例



很簡單的功能，就跳出一個訊息然後可以關掉

這個範例須要四個元素

1. 一個看效果網頁，隨便弄一個就好了 這邊拿DW的範例當底(懶惰一下)
2. 一個起動開啟Dialog事件的按鈕
   
<input type="button" value="叫出對話框" onclick="showDialog();" >

   
3. 一個遮住底頁的黑色不透明區塊
   
<div id="dialog"></div>

   
4. 真正要顯示訊息的區塊，他包含關閉Dialog事件的按鈕
   
<div id="msg">
<p>這是一個測試的對話框</p>
<input type="button" value="關閉" onclick="closeDialog();" />
</div>


   

-------
除了範例網頁之外，第三跟第四個元素，也就是Dialog對話框的Div可以隨便放
因為他們的位置是用絕對位置控制

先來觀察css設定的部分

html,body {
margin: 0;
padding: 0;
height:100%;
}

這第一部分，為了跟舊firefox相容，所以必須連html tag也設定，而不能光設定body tag
在此把height設為100%，不然的話IE6的div元素沒有辦法延展至100%
並且margin設為0，避免延展後的div區塊跟瀏覽器有間隔(這邊也是IE的bug)
下面是不加margin: 0;的效果，明顯可以看出遮擋的div沒有完全填滿視窗


接著看其他css設定

#dialog{
/* 非IE瀏覽用設定，使其長寬都延展至100% */
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
background-color:#000000;
z-index:1;
text-align:center;
}
*html #dialog{position:absolute;}/*IE舊瀏覽器用，設定絕對定位*/

#msg{ /*訊息區塊，背景設為白色，使用絕對定位*/
position:absolute;
top:0px;
left:0px;
background-color:#FFFFFF;
width:400px;
z-index:3;
}

在firefox就算height設成100%，但是會出現一個問題，他不像IE會自動填補scroll延展的部分，所以只要頁面有scroll並且往下拉就會破功
所以在此使用position:fixed來固定遮罩區塊，但是另一個問題出現了
就是IE不支持position:fixed這個屬性
所以我就利用了css hack的技巧，把IE挑出設定成position:absolute;
*html 是IE only的語法 可以拿來應付這種狀況

下圖是firefox使用position:absolute;來設定height:100%時的狀況

最後把z-index設置一下就ok了

之後就是jQuery的部分了，總共分成三大部分

第一部分，當DOM初始化之後，要先把對話框給隱藏起來
並且把遮罩div的透明度設成0.5
透明度設定請參照
http://hatsukiakio.blogspot.com/2009/07/jquerycss.html

$(document).ready(function(){
$("#dialog").css("display","none");
$("#msg").css("display","none");
$("#dialog").css("opacity","0.5");

});


第二部份是msg的div中，要關閉對話框的事件區動，說是關閉，也只是把dialog隱藏起來而已

function closeDialog(){
$("#dialog").css("display","none");
$("#msg").css("display","none");
}


第三部份，show出dialog，這部份比較雜一點

function showDialog(){
/*秀出對話框*/
$("#dialog").css("display","");
$("#msg").css("display","");

var _sw=document.body.clientWidth;//得到視窗寬度
var _sh=document.body.clientHeight;//得到視窗長度
if($.browser.msie)//判斷使否為IE
{
_sh-=260;
_sw-=24;
}
/*
var scrolltop;
//得到scroll的現在位置
if (document.documentElement && document.documentElement.scrollTop)
{
scrolltop=document.documentElement.scrollTop;
}
else if(document.body){
scrolltop=document.body.scrollTop;
}
*/
var w=$("#msg").width();
var h=$("#msg").height();
var _top=_sh/2-h/2+$(document).scrollTop();//更好的方法 使用jQuery解決
var _left=_sw/2-w/2;

/*設定視窗出現位置*/
$("#msg").css("top",_top+'px');
$("#msg").css("left",_left+'px');
}

要show出對話框，只要把他的display屬性從none改成空值及可
之後可以用document.body的clientWidth跟clientHeight得到視窗的大小
再來有一點也是瀏覽器的問題，IE會把上面工具列的部分也算在視窗size裡
所以要用jQuery的$.browser.msie來判斷是不是IE來做修正
最後是得到scroll的位置，一開始我是用document.documentElement去取得
但是後來發現jQuery的+$(document).scrollTop()就能做到相同的事情了