轉(zhuǎn)自http://www.cnblogs.com/drummery/archive/2008/06/17/popup_window.html

在Web開發(fā)中經(jīng)常會遇到需要使用彈出窗口的情況，使用彈出窗口可以分散主頁面的信息量，使用戶操作更加簡潔清晰，增強用戶體驗，但在使用瀏覽器彈出窗口時應該考慮到各種不同的瀏覽器對彈出方式的支持方式的兼容性問題，例如window.showModalDialog方法只能被IE瀏覽器支持，那么FireFox的用戶就無法看到彈出的瀏覽器窗口。本文進行了在客戶端多種彈出窗口的兩種嘗試，每種方式都在IE和FF下進行并通過了測試，下面將逐一介紹各種不同的實現(xiàn)方式：

方式1：使用window.open()方法

雖然window.showModalDialog()方法是IE獨有的，但window.open()方法卻是IE和FF都支持的，因此我們考慮使用這個方法實現(xiàn)彈出窗口，首先看一下這個方法的函數(shù)原型：

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

其中sURL是要打開的頁面的路徑，sName是打開新頁面的窗體或框架的名稱（_blank,_parent,_self等，也可以跟框架集中的框架名稱）字符串，sFeature是對彈出窗口的屬性描述的字符串，可以設置彈出窗口的各種屬性，包括是否有菜單欄，是否有工具欄，狀態(tài)欄等，該字符串的格式為“屬性名=值，屬性名=值”（關(guān)于sFeature的詳細內(nèi)容，參考下面的介紹），bReplace為true時表明彈出的窗口在瀏覽器歷史記錄中增加一條新的記錄，為false時不增加。

sFeature可選的屬性和值列表如下：

channelmode = { yes | no | 1 | 0 }	Specifies whether to display the window in theater mode and show the channel band. The default is?no.
directories = { yes | no | 1 | 0 }	Specifies whether to add directory buttons. The default is?yes.
fullscreen = { yes | no | 1 | 0 }	Specifies whether to display the browser in full-screen mode. The default is?no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window.?ALT+F4closes the new window. A window in full-screen mode must also be in theater mode (channelmode).
height = number	Specifies the height of the window, in pixels. The minimum value is?100.
left = number	Specifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.
location = { yes | no | 1 | 0 }	Specifies whether to display the input field for entering URLs directly into the browser. The default is?yes.
menubar = { yes | no | 1 | 0 }	Specifies whether to display the menu bar. The default is?yes.
resizable = { yes | no | 1 | 0 }	Specifies whether to display resize handles at the corners of the window. The default is?yes.
scrollbars = { yes | no | 1 | 0 }	Specifies whether to display horizontal and vertical scroll bars. The default is?yes.
status = { yes | no | 1 | 0 }	Specifies whether to add a status bar at the bottom of the window. The default is?yes.
titlebar = { yes | no | 1 | 0 }	Specifies whether to display a title bar for the window. This parameter is ignored unless the calling application is an?HTML Application?or a trusted dialog box. The default is?yes.
toolbar = { yes | no | 1 | 0 }	Specifies whether to display the browser toolbar, making buttons such as?Back,?Forward, and?Stop?available. The default is?yes.
top = number	Specifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.
width = number	Sets the width of the window, in pixels. The minimum value is?100.

有了上面的參考，我們就可以彈出一個我們希望的窗口了。示例代碼如下：

function?fnPopup(){
var?ref=open('Dialog1.aspx',null,'directories=yes,height=240px,width=320px,menubar=no,toolbar=no');
}

其中ref返回的是對彈出窗口的引用，在父窗口中，我們可以根據(jù)ref來操作彈出窗口中的對象，就像用彈出窗口的window對象一樣。現(xiàn)在要解決的是如何實現(xiàn)彈出窗口與父窗口之間的交互問題。首先要搞清楚如何獲取父窗口的引用。通過嘗試，發(fā)現(xiàn)在這種方式下用子窗口的window.parent獲取的對象并不是父窗口，而是子窗口本身，而在彈出窗口中獲取父窗口的正確方法是使用window.opener屬性。獲取了父窗口的引用，我們就可以實現(xiàn)兩個窗口之間的交互了。下面這段示例代碼將彈出窗口的uinput的值傳給父窗口的uinput，并關(guān)閉彈出窗口。

function?fnCloseWin(){
opener.document.getElementById('uinput').value=document.getElementById('uinput').value;
window.close();
}

至此我們已經(jīng)實現(xiàn)了兩個窗口之間最簡單的交互。現(xiàn)在我們讓彈出窗口彈出，在文本框中輸入一些內(nèi)容，然后再次觸發(fā)彈出窗口彈出，這時并沒有彈出一個新的窗口，但是我們看到彈出窗口中我們輸入的內(nèi)容已經(jīng)被清空了（這里實際把彈出窗口重新加載了一次，只不過是在同一個窗口中），我們采用剛才提到的彈出窗口引用來解決這個問題：當彈出窗口時保存彈出窗口的引用，當彈出窗口關(guān)閉時清空該值，那么我們就可以知道是否已經(jīng)有一個窗口打開了，根據(jù)這種思路，我們在上面的代碼里添加如下修改：

var?ref?=?null;
//?觸發(fā)彈出窗口的代碼
function?fnPopup(){
????if(ref==null)
????????//?保存彈出窗口的窗體引用
????????? ref=open('Dialog1.aspx',null,'directories=yes,height=240px,width=320px,menubar=no,toolbar=no');
}

//?彈出窗口中的處理邏輯
function?fnCloseWin(){
????opener.document.getElementById('uinput').value=document.getElementById('uinput').value;
//?修改父窗口的標志
????opener.ref=null;
????window.close();
}

通過這種方式我們可以解決上面描述的這種問題。

方式2：使用iframe

除了使用實際的彈出窗口，還可以使用控制一個div的display屬性來模擬一個彈出窗口的操作，這里使用在Div里放一個iFrame的方式，主要考慮到可以在需要的時候加載彈出窗口的內(nèi)容，減少主窗口的數(shù)據(jù)量。通是還要考慮的一個問題就是用戶在完成一次選擇后，當重復打開選擇框時，如何保存用戶上次選擇的狀態(tài)：例如用戶在彈出窗口中從A-E5個選項中選擇了AB兩個，當再次打開時，應該保證AB兩個是選中的。首先來看彈出窗口的實現(xiàn)，html代碼和腳本如下：

html

????<div?id="popup"?style="border:1px?solid?#606060;?width:320px;?height:240px;?display:none;">
????<iframe?id="myFrame"?src=""?style="width:100%;height:100%;"></iframe>
????</div>

這里要注意iFrame的src屬性留空了（其實默認值為about:blank），而且display屬性為none，在彈出窗口沒有打開時iFrame沒有頁面，div也不可見。

javascript

function?fnPopup(){
????document.getElementById('popup').style.display='block';
????????window.frames[0].location.href="Dialog1.aspx";
}

這里用了window的frames對象，這個對象獲取在當前頁面中定義的frame或iFrame，當前頁面只有一個iframe所以直接用window.frames[0]獲取出對iframe的引用，通過設置location.href屬性，就在iframe中打開希望的彈出窗口，同時設置div可見，則彈出窗口呈現(xiàn)給用戶。

在iFrame的虛擬彈出窗口中，可以使用window.parent與父窗口進行交互了，彈出窗口中負責交互的部分代碼如下：

function?fnCloseWin(){
parent.document.getElementById('uinput').value=document.getElementById('uinput').value;
parent.document.getElementById('popup').style.display='none';
???
}

完成交互后把 div隱藏，模擬彈出窗口關(guān)閉。現(xiàn)在要解決彈出窗口狀態(tài)保存的問題。考慮有兩種方案，第一種方案為用查詢字符串把值傳到彈出窗口中，由彈出窗口做相應的處理；后一種方案為用戶完成選擇后，只是隱藏彈出窗的div，下次再打開時只將div顯示，而不重新加載頁面，這樣也可以實現(xiàn)狀態(tài)的保存。但采用后一種方式，在主頁面發(fā)生反送動作后，狀態(tài)同樣也會丟失（這是后一種方案的問題）。后一種方案的實現(xiàn)為在fnPopup函數(shù)中做如下修改：

function?fnPopup(){
????document.getElementById('popup').style.display='block';
//?只有在第一次顯示時加載頁面
if(window.frames[0].location.href=='about:blank')
????????window.frames[0].location.href="Dialog1.aspx";
}

該種方案旨在說明如何在父窗口中判斷子窗口的狀態(tài)，具體的使用過程中還是使用查詢字符串的方式更為理想。

關(guān)閉：

http://www.jb51.net/article/16572.htm

<script type="text/javascript"> function closeme(){ var browserName=navigator.appName; if (browserName=="Netscape") { window.open('','_parent',''); window.close(); } else if (browserName=="Microsoft Internet Explorer") { window.opener = "whocares"; window.close(); } } </script> <input type="button" value="close me 3" οnclick="closeme();"/>

在chrome瀏覽器下，是需要在被彈出框中其窗口才能正常執(zhí)行，原有窗口不能通過其關(guān)閉。

總結(jié)

以上是生活随笔為你收集整理的JS弹出框及关闭的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。