javascript中的window.open方法詳

javascript中的window.open方法詳解

、window.open()支持環境：
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本語法：
window.open(pageURL,name,parameters)
其中：
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(各參數用逗號分隔)

三、示例：

<SCRIPT> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
//寫成一行 
--> 
</SCRIPT>

【1、最基本的彈出窗口代碼】
　　其實代碼非常簡單：

<SCRIPT LANGUAGE="javascript"> 
<!-- 
window.open ('page.html') 
--> 
</SCRIPT>

因為著是一段javascripts代碼，所以它們應該放在<SCRIPT LANGUAGE="javascript">標簽和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標簽中的代碼作為文本顯示出來。要養成這個好習慣啊。
　　Window.open ('page.html') 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。
　　這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

【2、經過設置后的彈出窗口】

　　下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。
　　我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。

<SCRIPT LANGUAGE="javascript"> 
<!-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') 
//寫成一行 
--> 
</SCRIPT>

參數解釋：
<SCRIPT LANGUAGE="javascript"> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
Resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
</SCRIPT> js腳本結束

【3、用函數控制彈出窗口】

　　下面是一個完整的代碼。

<html> 
<head> 
<script LANGUAGE="JavaScript"> 
<!-- 
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//寫成一行 
} 
//--> 
</script> 
</head> 
<body onload="openwin()"> 
…任意的頁面內容… 
</body> 
</html>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎么調用呢？
方法一：<body onload="openwin()"> 瀏覽器讀頁面時彈出窗口；
方法二：<body onunload="openwin()"> 瀏覽器離開頁面時彈出窗口；
方法三：用一個連接調用：
<a href="#" onclick="openwin()">打開一個窗口</a>
注意：使用的"#"是虛連接。
方法四：用一個按鈕調用：
<input type="button" onclick="openwin()" value="打開窗口">

【4、同時彈出2個窗口】

　　對源代碼稍微改動一下：

<script LANGUAGE="JavaScript"> 
<!-- 
function openwin() 
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//寫成一行 
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//寫成一行 
} 
//--> 
</script>

　　為避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調用即可。
注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。OK？

【5、主窗口打開文件1.htm，同時彈出小窗口page.html】

　　如下代碼加入主窗口<head>區：

<script language="javascript"> 
<!-- 
function openwin() 
{window.open("page.html","","width=200,height=200") 
} 
//--> 
</script>

　　加入<body>區：
<a href="1.htm" onclick="openwin()">open</a>即可。

【6、彈出的窗口之定時關閉控制】

　　下面我們再對彈出的窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中，可不是主頁面中，否則…)，讓它10秒后自動關閉是不是更酷了？
　　首先，將如下代碼加入page.html文件的<head>區：

<script language="JavaScript"> 
function closeit() 
{setTimeout("self.close()",10000) //毫秒} 
</script>

　　然后，再用<body onload="closeit()"> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼，10秒鐘后就自行關閉該窗口。)

【7、在彈出窗口中加上一個關閉按鈕】

<FORM> 
<INPUT TYPE='BUTTON' VALUE='關閉' onClick='window.close()'> 
</FORM>

　　呵呵，現在更加完美了！

【8、內包含的彈出窗口-一個頁面兩個窗口】

　　上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
　　通過下面的例子，你可以在一個頁面內完成上面的效果。

<html> 
<head> 
<SCRIPT LANGUAGE="JavaScript"> 
function openwin() 
{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); 
//寫成一行 
OpenWindow.document.write("<TITLE>例子</TITLE>") 
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
OpenWindow.document.write("<h1>Hello!</h1>") 
OpenWindow.document.write("New window opened!") 
OpenWindow.document.write("</BODY>") 
OpenWindow.document.write("</HTML>") 
OpenWindow.document.close()} 
</SCRIPT> 
</head> 
<body> 
<a href="#" onclick="openwin()">打開一個窗口</a> 
<input type="button" onclick="openwin()" value="打開窗口"> 
</body> 
</html>

　　看看 OpenWindow.document.write()里面的代碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標簽或少一個標簽就會出現錯誤。記得用OpenWindow.document.close()結束啊。

【9、終極應用--彈出的窗口之Cookie控制】

　　回想一下，上面的彈出窗口雖然酷，但是有一點小毛病(沉浸在喜悅之中，一定沒有發現吧？)比如你將上面的腳本放在一個需要頻繁經過的頁面里(例如首頁)，那么每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？:-(有解決的辦法嗎？Yes! ;-) Follow me.
　　我們使用cookie來控制一下就可以了。
　　首先，將如下代碼加入主頁面HTML的<HEAD>區：

<script> 
function openwin() 
{window.open("page.html","","width=200,height=200")} 
function get_cookie(Name) 
{var search=Name + "=" 
var returnvalue=""; 
if (document.cookie.length > 0) { 
offset=document.cookie.indexOf(search) 
if (offset !=-1) { 
offset +=search.length 
end=document.cookie.indexOf(";", offset); 
if (end==-1) 
end=document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset,end)) 
} 
} 
return returnvalue; 
} 
function loadpopup(){ 
if (get_cookie('popped')==''){ 
openwin() 
document.cookie="popped=yes" 
} 
} 
</script>

　　然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once！
　　寫到這里彈出窗口的制作和應用技巧基本上算是完成了，俺也累壞了，一口氣說了這么多，希望對正在制作網頁的朋友有所幫助俺就非常欣慰了。
　　需要注意的是，JS腳本中的的大小寫最好前后保持一致。

如果使用超級鏈接作為彈出窗口的觸發控件，要注意的是：不能更改target屬性(即：target=-self或不進行設置)，否則可能會彈出一個以上的窗口

過觀察彈窗，我們會發現大多數彈窗都存在著破壞用戶體驗，降低用戶好感度的效果。因此本文結合這一現象，講具體分析背后的原理以及避免的方法。

無論是否使用彈出窗口，大多數窗口疊加都出現在錯誤的時間，在進行關鍵任務時中斷用戶，使用不良語言，并導致用戶迷失方向。

通過進行數十年的用戶研究，我們知道人們不喜歡彈出窗口和彈出框。在最近的一次可用性研究中，我想起了這一事實。在嘗試完成任務時，一名參與者在連續遇到多個彈出窗口后將他的手機扔到了桌子上。令人沮喪的是，他放棄了任務，離開了網站，給組織留下了非常壞的印象。其他幾個用戶也有類似的看法，盡管他們沒有扔掉他們的手機。

彈出窗口（也稱為疊加或彈出）是覆蓋在頁面內容上部（層）顯示的窗口或對話框。彈出窗口可以根據兩個維度進行分類：

（1）用戶是否可以與頁面的其余部分進行交互：

模態框（Modal）：在用戶明確地與疊加層交互之前，頁面上的內容將被禁用。
非模態框（nonmodal）：用戶仍然可以與背景內容進行交互（例如，通過選擇鏈接或點擊按鈕），同時覆蓋疊加仍然可見。

（2）背景是否變暗：

如果背景變暗，則彈出窗口稱為lightbox。
當背景內容沒有視覺上的變暗時，沒有特殊名稱。

雖然在許多情況下lightbox屬于模態框（Modal），但并非總是如此。

在彈出窗口的定義中，模態框（Modal）禁用所有背景內容，非模態框（nonmodal）疊加保留用戶與背景內容交互的能力，lightbox使背景內容變暗。

幾個星期以來，我捕獲了在網站和移動應用程序中遇到的每個彈出窗口的屏幕截圖：平均每周 25 個彈出窗口，這比任何人能夠忍受的都要多（但非常能代表今天的互聯網用戶體驗）。

這個實驗連同我的可用性研究一起出現了無數糟糕的實踐，并證明疊加已經遠遠被過度使用了。我們已經接近網站濫用這些元素的程度，以至于有問題的實例遠遠超過彈出窗口仍然是一種有用的設計策略的情況。

在本文中，我將概述我觀察到的問題并討論要考慮的關鍵因素，以及彈出窗口的實際替代方案，以遵循組織的意圖和用戶體驗。

彈出窗口的時機：在交互之前或關鍵任務期間不要提示

1. 在加載主頁內容之前顯示彈出窗口

無論使用何種變體，在用戶可以從你的網站或應用程序中收集有價值的內容之前，切勿顯示彈出窗口。這種趨勢是非常具有侵入性的，因為用戶的任務在他們登陸頁面之前就被打斷了。人們已經習慣于在網站上看到過早的彈出窗口并且通常忽略它們或者立即尋找最快的方式來關閉彈出窗口返回任務。在頁面加載之前出現的彈出窗口使網站看起來很不舒服，用戶體驗感讓人抓狂。

此外，未能識別這些事實的網站在搜索引擎結果中排名很低[Google懲罰網站]（https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html）的做法是使用戶無法訪問內容，特別是在移動設備上。

替代方案：

等待彈出窗口中的內容，直到它與用戶的上下文相關。使用互惠原則：在向他們詢問任何內容之前給予訪問者有價值的內容，無論是請求電子郵件地址，還是取消彈出窗口的操作。運行用戶測試以確定適合計劃在彈出窗口中顯示的任何內容的上下文，并找出顯示該內容的最佳方式；在許多情況下，它不會在彈出窗口中。在頁面內容加載之前顯示任何類型的彈出窗口是可接受的唯一用例是，當你的網站有法律義務要求用戶同意接受使用cookie或驗證其年齡時。

在加載主頁面內容之前，HuffPost向用戶提供了一個lightbox。這是一種可接受的使用其他有問題的做法，因為該網站在使用個人數據（包括位置）時在法律上有義務征得同意。

2. 在用戶登錄后立即顯示彈出窗口

用戶登錄后顯示的彈出窗口與頁面內容加載前顯示的彈出窗口一樣令人煩惱。當用戶登錄帳戶時，他們會考慮下一步或后續任務，否則他們為什么會登錄？！立即出現任何類型的彈出窗口會分散注意力并妨礙他們完成下一步。因為他們專注于下一步，所以用戶可能不會關注彈出窗口或突然關閉彈出窗口。不僅如此，他們可能會因為中斷以及關閉彈出窗口或移動它所需的額外時間和交互成本而感到沮喪。

替代方案：

在登錄帳戶后，為用戶提供一些時間和空間來完成任務，并且不會立即顯示彈出窗口。在經過一段時間后，最終提供有用的、可以接受的帳戶提示、指南或新功能是，但前提是用戶的任務得到顯示的內容或新功能的增強或進一步支持。在這些情況下，總是傾向于使用較少侵入性的方法（如工具提示和小型非模態框疊加層）來傳達這些元素。

Gmail使用相對不顯眼的非模態框疊加層來引入支持用戶當前清理收件箱任務的新功能。非模態框疊加出現在用戶與收件箱交互之后，而不是在登錄后立即顯示。

3. 在交互之前詢問電子郵件地址

許多網站和應用程序在有機會與內容交互之前使用彈出窗口來詢問用戶的電子郵件地址。

電子商務、新聞網站和應用程序以及博客是此類別中最大的違規者。這種方法存在問題，因為人們不僅會因為彈出窗口、其彈出時機以及網站過早要求電子郵件地址這一事實感到惱火，而且他們還會認為該網站會向他們發送垃圾郵件。

例如：登陸 Uncommon Goods 網站的一個用戶在受到模態框（Modal）的問候時感到不滿，其要求輸入她的電子郵件地址才可以訪問秘密銷售。

她說：

“在網站上做其他事情之前，這樣的東西突然出現，真讓我惱火。如果我第一次來到這個網站，我怎么知道我是否想成為電子郵件訂閱者？我希望稍后再說。”

一個用戶在登錄 Uncommon Goods 網站時看到一個模態框（Modal），在她到達網站后不久就要求她提供電子郵件地址，這讓用戶感到惱火。

在詢問用戶的電子郵件地址時，需要考慮許多權衡因素。網站和應用程序通常使用過早的模態框（Modal），因為它們產生的指標會在短期內上升。然而，短期指標通常會以使許多用戶感到沮喪為代價，而這些用戶并非出于任意激勵，例如秘密銷售。

替代方案：

與其在早期顯示電子郵件彈出窗口，不如考慮用戶何時最愿意與您共享其電子郵件地址。他們是否正在瀏覽具有適用促銷代碼的類別？或許他們只是閱讀（或掃描）了整篇博文。這些動作可能是最小侵入性非模態疊加的適當觸發器，可能出現在靠近右上角或右下角的位置，使用合理數量的屏幕空間。向用戶提供有價值的和有形的內容，以換取他們的電子郵件地址; 不要只是指望他們主動交出來。

MarkManson.net網站在人們到達博客文章底部后，顯示了一個最小的侵入性非模態框覆蓋。該彈出窗口還提供了一個免費的電子書作為獎勵。

4. 在人們做了任何有意義的事情之前要求反饋

接收用戶的反饋非常重要，但當用戶在你的網站上做任何事情之前，不應該向他們發送反饋提示。網站和應用程序傾向于立即向用戶提供反饋彈出窗口，希望他們能夠給予高度評價并繼續他們的任務。但是這種情況很少發生; 更常見的是，用戶迅速關閉彈出窗口，無意再次尋找它。

在體驗中的適當位置從用戶那里獲得有意義的反饋，可以深入了解他們面臨的挑戰和障礙。 但是如果你過早地要求反饋，你可能會在最重要的時候沒有得到任何反饋。

例如，當一名研究參與者試圖在ATT.com上支付電話賬單時，對出現的反饋模式感到沮喪。她說，“嗯，我付賬單后會給出反饋，但現在我很沮喪，因為我還沒有做任何事情就讓我給出反饋。”

一名研究參與者在試圖支付電話費時不情愿地關閉了反饋模式。她說，她都還沒有在網站上做任何事情，就被要求提供反饋。

替代方案：

要求用戶在完成您網站上的頂級任務后立即提供反饋。此方法可以最大限度地減少中斷并確保反饋基于實際的互動。

例如，視頻會議軟件 BlueJeans 在會議結束后要求用戶提供反饋。此請求未提前顯示，但在上下文相關且適當的時間出現了。

用戶在完成關鍵任務后立即詢問用戶的反饋，而不是在用戶到達你的網站后立即征求反饋。這樣，你就增加了接收相關評論或評級的機會。在這種情況下使用模態框疊加對用戶來說不那么煩人和具有侵入性

5. 在關鍵任務期間中斷用戶請求反饋

用戶討厭被打斷，但是在完成關鍵任務的過程中，大量網站和應用程序通過反饋彈出窗口干擾用戶。大多數情況下，提供反饋并不是用戶訪問網站的首要原因，因此也不要在關鍵任務中使用彈出窗口來擾亂人們。

美聯航應用程序在關鍵任務中間顯示模態框疊加：檢索登機牌。

替代方案：

除了要求用戶僅在完成關鍵任務后提供反饋之外，還提供靜態的、非侵入性的方式，以便隨時提供反饋。屏幕一側的選項卡，頁腳中的鏈接或導航中的鏈接都是破壞性模態框的可接受替代方案，并讓用戶在準備就緒時能夠分享他們的觀點。

雀巢應用程序沒有使用反饋模式中斷用戶，但在網站的頁腳中包含反饋鏈接。

英國航空公司在其所有頁面的右側顯示一個標記為**反饋**的按鈕。

6. 逐個顯示多個彈出窗口

在彼此上方顯示多個彈出窗口會使你的網站看起來不專業、絕望和雜亂無章。它還會壓倒用戶并迫使他們花費精力來關閉每個窗口。如果你的站點使用許多不同類型的彈出窗口，測試實施以避免一次向用戶顯示多個彈出窗口。

替代方案：

如果你必須在彈出窗口中顯示關鍵信息（例如重要警告以防止或糾正錯誤），請確保一次只顯示一個。更妙的是，不要在彈出窗口中顯示關鍵信息，因為人們傾向于在沒有閱讀的情況下關閉它們。相反，使用視覺上不同的元素并將其直接放在頁面上，其中消息提示最適合上下文。確保副本清楚、準確地傳達用戶需要做些什么來糾正問題并繼續前進。

在結賬流程結束時，Lulus同時提供了多個反饋模式。更好的方法是一次只顯示一個或將反饋表單嵌入確認頁面。

Canva 在頁面上直接顯示關鍵信息做得很好。它使用位于頂部的視覺上不同的內容模塊而不是彈出窗口。消息提示幫助用戶了解他們需要做些什么來糾正問題。

彈出上下文：不妨礙內容的轉換或訪問

7. 在用戶移動到新的子域或外部站點之前顯示模態框覆蓋

某些公司網站會鏈接到位于子域和外部站點上的內容或應用程序。在用戶離開主站點之前，會出現一個模態框疊加圖，提醒用戶即將發生的轉換。這種類型的彈出窗口是有問題的，因為它過分強調了過渡，使用戶感到迷茫和困惑，特別是如果子站點是在新的瀏覽器選項卡中打開時。

在我們的一次可用性測試會議期間，一位在HSBC網站上尋找工作的參與者在嘗試基本上分為3個不同網站的任務時遇到了兩種不同的過渡模式。

他說：

“它一直把我帶到其他網站，我甚至不知道我在哪里了。如果他們的工作申請流程如此復雜和脫節，我真的不認為這是一個好的工作地方。無論這個網站看起來多么漂亮，這似乎都是一團糟。”

點擊Careers菜單后，模態框警告用戶他們即將離開初始站點。

在同一個網站上，用戶還看到了另外一種模式，表明他們要去第三個網站申請這份工作。

替代方案：

將用戶鏈接到外部屬性時，刪除模態框，最小化站點之間的過渡，并始終保留回主站點的導航。如果你的用戶確實需要在離開你的網站時收到警告，使用較少侵入性的選項（例如鏈接上的工具提示）以淡化過渡轉換。

Eli Lilly：向用戶提供了一個信息豐富的工具提示，讓他們知道他們將訪問不同的網站。工具提示幫助用戶記住他們的位置和去向。

8. 通過模態框疊加中斷對內容的訪問

在用戶加載文章或其他長篇內容（例如通常在網站的關于我們或新聞部分中找到的內容）之后立即出現的模態對話框，使其看起來好像網站在限制對該內容的訪問。這種環境是一個特別不好的表現，因為它會降低網站的可信度。

CNN移動應用程序中的一個用戶在登陸他想閱讀的文章后立即遇到郵件訂閱模態框時感到沮喪。他說：

“這導致我對CNN的懷疑達到頂峰。不要要求我填寫電子郵件或立即注冊任何內容。”

CNN的移動應用程序在用戶登陸頁面閱讀文章時顯示一個具有權限提示的模態框。這樣做是有問題的，因為注冊CNN的時事通訊不是用戶在那里的原因; 閱讀內容才是。

替代方案：

允許用戶在不中斷的情況下直接使用內容。將彈出窗口替換為頁面頂部的易于關閉的橫幅。彈出窗口的替代方案將允許用戶如果想要訂閱時事通訊時可以自行訂閱，而不會阻斷他們收看信息的主要任務。

Conde’Nast Traveler的網站在導航下方的一個微妙且非侵入性的橫幅中介紹了其簡報訂閱。這種設計允許感興趣的用戶訂閱時事通訊，但并沒有分散那些只想閱讀網站內容的人的注意力。

彈出內容：不要假設模態框疊加將傳遞消息

9. 使用模態框疊加來進行GDPR和cookie通知

用戶已經匆忙關閉了模態框疊加，因為他們認為沒有任何好處。為了傳達與GDPR和cookie的使用相關的重要信息，請不要使用模態框疊加。

替代方案：最好放置在頁面底部或側面的非模態框疊加。這些功能的侵入性要小得多，并且允許用戶繼續執行任務。確保提供有關如何收集和使用用戶個人數據的足夠信息。

Reddit 使用小而不顯眼的非模態框覆蓋來請求用戶是否同意cookie; 但是，描述人們數據使用方式的語言過于模糊。

NNgroup.com使用非模態框覆蓋，其中包含有關cookie使用的清晰語言。我們概述了為什么我們收集人們的數據以及這些數據是如何專門用于他們利益。

10. 鼓勵模態疊加中的頻道轉換，而不傳達特定的好處

經常可以看到鼓勵用戶從移動網站過渡到相關移動應用程序的模式，尤其是在電子商務或新聞網站上。在許多情況下，這些疊加是破壞性的并且存在問題：通常，網絡用戶是一次性用戶，他們沒有興趣為臨時任務下載應用程序。

可以理解的是，組織希望鼓勵應用程序下載，但模式覆蓋不是宣傳你的移動應用程序的正確方法。即使是手機上有應用程序的用戶也可能不愿意切換頻道，因為害怕重新開始他們的流程。模態框疊加只會困擾他們。

替代方案：

為組織的移動應用程序創建意識，但不以侵入用戶當前任務為代價。偏向于低調的方法，例如標準的頂部橫幅，并概述了使用該應用程序來簡化人們向該頻道過渡的好處。

Wayfair用一種鼓勵下載其移動應用程序的通用模式打斷了用戶。用戶認為他們必須投入大量的工作才能在另一個渠道上重新開始他們的任務，而不會帶來實際的好處。

梅西百貨在鼓勵手機應用程序下載方面做得不錯。頁面底部的非模態框疊加包含對頻道轉換的獎勵以及顯示應用的用戶評級。

總結

鑒于這個總體結論，你可能想知道何時可以使用彈出窗口；答案是——謹慎使用。

抵制跟隨人群的沖動，不要因為中斷而淹沒用戶以支持短期指標。探索尊重用戶需求的替代方法，并保持組織收集反饋的意圖，通知用戶數據收集，獲取電子郵件地址或鼓勵頻道轉換。

保留使用模態框疊加，以便僅在適當的時間提供關鍵信息。不要通過大量的侵入式彈出窗口中斷基本任務或阻止相關內容。進行可用性測試，以確保你的彈出窗口不會讓你的用戶感到沮喪，并且作為額外的好處，你將獲得真正的意見反饋，以幫助你改善整體體驗。

原文作者：Anna Kaley

原文地址：https://www.nngroup.com/articles/popups/

譯文地址：https://www.jianshu.com/p/7a0d1157c9c9

編譯作者：iris0327，公眾號：設計吐司

本文由 @iris0327 授權發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash, 基于CC0協議

紹

sweetalert2是一個漂亮的、響應式、可定制的替代JAVASCRIPT原生的彈出框插件。sweetalert2相比sweetalert更加強大,但它不是sweetalert的擴展，它是一個全新的插件，且支持三大流行前端框架React、Vue、Angular。

Github和官網

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安裝

提供了很多安裝方式

使用npm安裝

npm install --save sweetalert2

使用cdn

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

注意：如果想要兼容IE11，還得引入polyfill.js

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

模塊化用法

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal=require('sweetalert2')

示例

最基本的信息彈出框

Swal.fire('基本信息彈框')

標題下包含文字

Swal.fire(
 '標題下有文字',
 '標題下的文字?',
 'question'
 )

底部文字

Swal.fire({
 type: 'error',
 title: '標題',
 text: '出錯啦！',
 footer: '<a href>為什么會出錯?</a>'
 })

自定義html

Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定義的html<a ,
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起來不錯',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

自定義彈框的位置

Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

函數回調

Swal.fire({
 title: '確定要刪除么?',
 text: "刪除后將無法撤銷!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '確定',
 cancelButtonText:'取消'
 }).then((result)=> {
 if (result.value) {
 Swal.fire(
 '刪除成功!',
 '文件已被刪除',
 'success'
 )
 }
 })

自定義圖片，禁止動畫

Swal.fire({
 title: '標題',
 text: '自定義圖片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

自定義寬度、邊框和背景

Swal.fire({
 title: '自定義寬度、邊框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

自定義關閉（自動關閉）

let timerInterval
Swal.fire({
 title: '自動關閉的彈框!',
 html: '我會在<strong></strong> 秒后關閉.',
 timer: 2000,
 onBeforeOpen: ()=> {
 Swal.showLoading()
 timerInterval=setInterval(()=> {
 Swal.getContent().querySelector('strong')
 .textContent=Swal.getTimerLeft()
 }, 100)
 },
 onClose: ()=> {
 clearInterval(timerInterval)
 }
}).then((result)=> {
 if (
 // Read more about handling dismissals
 result.dismiss===Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

異步提交

Swal.fire({
 title: '提交用戶名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login)=> {
 return fetch(`//api.github.com/users/${login}`)
 .then(response=> {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error=> {
 Swal.showValidationMessage(
 `請求出錯: ${error}`
 )
 })
 },
 allowOutsideClick: ()=> !Swal.isLoading()
 }).then((result)=> {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

三步曲

Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '問題1',
 text: '使用modal很簡單？'
 },
 '問題2',
 '問題3'
 ]).then((result)=> {
 if (result.value) {
 Swal.fire({
 title: '所有問題回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

這里就簡單介紹這些示例，更多示例詳見官方文檔

彈框類型

success

error

warning

info

question

瀏覽器兼容性

總結

sweetalert2是原本sweetalert的升級版，功能更加強大，文檔更加全面，寫法更加先進，是Web開發中常用的插件，當然同樣優秀的還有很多，比如國產的layer.js也很好用，選擇一個適合自己的就成，今天的介紹就到這里，希望能對你有所幫助，如果還有更好的推薦，歡迎到評論區留言，謝謝！

在線咨詢

上一篇：HTML <area>
下一篇：HTML通用屬性和各種事件屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript中的window.open方法詳

彈出窗口的時機：在交互之前或關鍵任務期間不要提示

1. 在加載主頁內容之前顯示彈出窗口

2. 在用戶登錄后立即顯示彈出窗口

3. 在交互之前詢問電子郵件地址

4. 在人們做了任何有意義的事情之前要求反饋

5. 在關鍵任務期間中斷用戶請求反饋

6. 逐個顯示多個彈出窗口

彈出上下文：不妨礙內容的轉換或訪問

7. 在用戶移動到新的子域或外部站點之前顯示模態框覆蓋

8. 通過模態框疊加中斷對內容的訪問

彈出內容：不要假設模態框疊加將傳遞消息

9. 使用模態框疊加來進行GDPR和cookie通知

10. 鼓勵模態疊加中的頻道轉換，而不傳達特定的好處

總結

紹

Github和官網

安裝

模塊化用法

示例

彈框類型

相關項目

瀏覽器兼容性

總結

您的項目需求