js實現模態對話框

2011/6/21 11:13:35  出處：本站   人氣：142次    字號：小  中  大

這篇文章提供給大家分享學習的是關于js實現模態對話框經驗分享，希望能夠幫助到大家。

首先，來說一下對話框 
對話框在Windows應用程序中使用非常普遍，許多應用程序的設定，與用戶交互需 
要通過對話框來進行，因此對話框是Windows應用程序中最重要的界面元素之一， 
是與用戶交互的重要手段。對話框是一個特殊的窗口，任何對窗口進行的操作（ 
如移動、最大化、最小化等）也可以在對話框實施。 

對話框大致可以分為以下兩種。 

（1）模態對話框：模態對話框彈出后，獨占了系統資源，用戶只有在關閉該對話 
框后才可以繼續執行，不能夠在關閉對話框之前執行應用程序其他部分的代碼。 
模態對話框一般要求用戶做出某種選擇。 

（2）非模態對話框：非模態對話框彈出后，程序可以在不關閉該對話框的情況下 
繼續執行，在轉入到應用程序其他部分的代碼時可以不需要用戶做出響應。非模 
態對話框一般用來顯示信息，或者實時地進行一些設置。 

模態窗口在傳統編程語言中很常見，簡單的說就是，如果是模態的，就是打開一 
個子窗口，如果這個子窗口不關閉，就不能操作它的父窗口，原來程序暫停執行 
，直到這個模態窗口關閉后才回到原來程序繼續。 

非模態的就是直接顯示出來，然后原來的程序繼續執行下面的語句，而且其他窗 
口也呈可用狀態。 

模態對話框獨占了用戶的輸入，當一個模態對話框打開時，用戶只能與該對話框 
進行交互，而其他用戶界面對象收不到輸入信息。應用程序用到的大部分對話框 
都是模態對話框。 
通常瀏覽器中windwo.open或超鏈接彈出的新窗口就是非模式窗口,而模式窗口是 
類似alert那種必須關閉才能響應其他事件的窗口。 

明白了對話框的模態和非模態，來看下邊 

在B/s結構應用程序的開發中,有時我們會希望使用者按下按鈕后開啟一個保持在 
原窗口前方的子窗口, 
在IE中,我們可以使用 
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。 
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框，由于 
是對話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。 


這里是window.showModalDialog彈出窗口的一個實例函數:  

<script type="text/javascript">    function openWin(src, width, height, showScroll){    window.showModalDialog   (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig   ht:"+height+";scroll:"+showScroll+";");    }    </script>   例：<span style="CURSOR: pointer" onclick="openWin   (’http://www.deepteach.com’, ’500px’, ’400px’, ’no’)">點擊</span>

需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因為在最初  
MozillaSuite 中（Firefox 是從這個套件衍生），是支持 showmodaldialog()  
的，不過后來發現 showmodaldialog() 存在安全隱患，不久后就取消了對  
showmodaldialog() 的支持，這個事情還發生在 bug 194404 提交前。在想出更 
好的解決方案前，相信 Firefox 是不會提供對 showmodaldialog() 的支持的。 

打開彈窗只能使用window.open實現這樣的功能，window.open的語法如下 :  
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])  

只是,在Firefox下,window.open的參數中,sFeature多了一些功能設定,要讓 
FireFox下開啟的窗口跟IE的showModalDialog一樣的話, 
只要在sFeatures中加個modal=yes就可以了,也許可能是出于安全考慮modal=yes  
打開的并不是模式窗口 
范例如下:  

window.open   (’openwin.html’,'newWin’, 'modal=yes, width=200,height=200,resizable=no, scrollbars=no’ );

由于在firefox沒有showModalDialog方法。則用如下判斷來兼容兩種瀏覽器：  

<input type="button" value="打開對話框" onclick="showDialog('#')"/>     <SCRIPT   LANGUAGE="JavaScript">     <!--     function   showDialog(url)     {      if(   document.all   ) //IE      {      feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no";      window.showModalDialog(url,null,feature);      }      else      {        //modelessDialog可以將modal換成dialog=yes      feature ="width=300,height=200,menubar=no,toolbar=no,location=no,";      feature+="scrollbars=no,status=no,modal=yes";        window.open(url,null,feature);      }     }     //-->   </SCRIPT>