整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
次在講css實(shí)現(xiàn)tab切換時(shí)，有童靴留言說(shuō)可以使用錨點(diǎn)實(shí)現(xiàn)，對(duì)的，就是可以使用錨點(diǎn)，然而，使用錨點(diǎn)涉及到的又有哪些關(guān)鍵技術(shù)了？今天我們以錨點(diǎn)實(shí)現(xiàn)彈窗為例來(lái)解答這個(gè)問(wèn)題
一句話總結(jié)實(shí)現(xiàn)原理就是：a標(biāo)簽改變hash值觸發(fā)css3偽類target作用對(duì)應(yīng)id的dom元素。
：target是CSS里一個(gè)非常有趣的偽選擇器。它在CSS里發(fā)生作用的過(guò)程是這樣的：當(dāng)瀏覽器地址里的hash（地址#號(hào)后面的部分）和：target偽選擇器指定的ID匹配上時(shí)，它的樣式就會(huì)在這個(gè)ID元素上生效。
實(shí)例dom結(jié)構(gòu)：
dom結(jié)構(gòu)比較簡(jiǎn)單，兩個(gè)帶href為#id的a標(biāo)簽，以及兩上對(duì)應(yīng)#id后面id值作為自己id的p標(biāo)簽。下面我們給偽元素定義一個(gè)樣式：
然后，我們點(diǎn)擊#news1時(shí)p#news1元素對(duì)這個(gè)樣式生效，點(diǎn)擊#news2時(shí)p#news2元素對(duì)這個(gè)樣式生效。（結(jié)論是：target選擇器會(huì)突出顯示當(dāng)前活動(dòng)的HTML錨）效果是這樣的：
好了，以上實(shí)現(xiàn)就是為了說(shuō)明偽元素是這樣作用的，記住上面加粗語(yǔ)句就行了。下面來(lái)實(shí)現(xiàn)我們本篇要講的主題—錨點(diǎn)實(shí)現(xiàn)彈窗
知道target是怎么作用的了，那下面這個(gè)彈窗功能就好實(shí)現(xiàn)了。
實(shí)現(xiàn)的dom結(jié)構(gòu)：
由上圖可知，兩個(gè)帶href#id的a標(biāo)簽，和兩個(gè)id等于#id的dom結(jié)構(gòu)。運(yùn)行效果是這樣的：
給target偽類定義樣式：
這個(gè)樣式的作用是將dom從不顯示變成顯示。
當(dāng)我們點(diǎn)擊“點(diǎn)擊我”按鈕時(shí)，通過(guò)錨點(diǎn)改變hash值在通過(guò)偽類target將id="popup1"的dom添加偽類定義的樣式。結(jié)果是這樣的：
當(dāng)點(diǎn)擊浮層上的叉時(shí)，關(guān)閉這個(gè)浮層，原理也是一樣的（改變hash引起偽類失效）。
當(dāng)我們點(diǎn)擊“也點(diǎn)擊我嘛”按鈕時(shí)，同樣通過(guò)錨點(diǎn)改變hash值在通過(guò)偽類target將id="popup2"的dom添加偽類定義的樣。效果是這樣的：
只是這種情況將設(shè)置關(guān)閉的div.cancel設(shè)置成了全局寬度，層級(jí)在浮層下。所以通過(guò)點(diǎn)擊浮層外的區(qū)域就關(guān)閉了浮層，關(guān)閉原理是一樣的。
CSS3的target這個(gè)屬性，雖然所有的主流瀏覽器都支持，除了IE8及以下的版本，但是現(xiàn)在使用這種技術(shù)的人還是比較少，其實(shí)，如果不是太注重動(dòng)態(tài)效果，使用這種瀏覽器原生技術(shù)來(lái)修飾你的應(yīng)用也是不錯(cuò)的選擇。
短內(nèi)容，說(shuō)完整事，哪怕只讀一篇也能學(xué)知識(shí)。點(diǎn)擊關(guān)注小鄭搞碼事，說(shuō)的都是那堆代碼。謝謝您的鼓勵(lì)！
窗的類型有非常多種，所以在使用時(shí)很容易被濫用，這樣不僅會(huì)對(duì)用戶帶來(lái)困擾，也會(huì)讓我們的設(shè)計(jì)中出現(xiàn)細(xì)枝末節(jié)的問(wèn)題。本篇文章分析和總結(jié)了不同彈窗的使用場(chǎng)景及工作中的實(shí)際應(yīng)用，知道這些后，以后再也不會(huì)“濫用”彈窗啦！
我們口中常說(shuō)的彈窗其實(shí)是個(gè)廣義的范圍，包括了對(duì)話框，動(dòng)作菜單，浮出層，toast，snackbar等，這么多類型的彈窗在使用中很容易混亂或者說(shuō)濫用，反而得不償失，給用戶帶來(lái)更多困擾。故本篇文章主要分析和總結(jié)不同彈窗的使用場(chǎng)景及工作中的實(shí)際應(yīng)用。
官方的設(shè)計(jì)樣式會(huì)提到，但是細(xì)節(jié)不展開(kāi)，有需要的可以參閱MD官方文檔和蘋果HIG官方文檔，文檔里介紹的都很細(xì)致。
除了官方文檔，本文還參閱了很多前輩的總結(jié)分析，參考鏈接已置于文末。（配圖主要來(lái)自體驗(yàn)過(guò)程中的app截圖，安卓部分截圖主要來(lái)自MD規(guī)范）
在App使用中，彈窗出現(xiàn)的頻率越來(lái)越高，運(yùn)營(yíng)活動(dòng)，系統(tǒng)通知，信息反饋，任務(wù)引導(dǎo)等。濫用的彈窗會(huì)漸漸導(dǎo)致用戶認(rèn)知疲勞和視覺(jué)失調(diào)，甚至?xí)霈F(xiàn)“習(xí)慣性取消”等行為。
彈窗最主要的功能就是服務(wù)于當(dāng)前主任務(wù)之外的支線任務(wù)，包括信息傳遞，操作反饋等。
對(duì)話框，警告框，toast……都屬于彈窗，但是使用場(chǎng)景都不一樣。
在合適的業(yè)務(wù)場(chǎng)景選擇合適的彈窗組件，能夠保證最基礎(chǔ)的用戶體驗(yàn)。因?yàn)橄駨?qiáng)干擾類彈窗的使用，對(duì)用戶而言，更是一種強(qiáng)加的任務(wù)，很容易導(dǎo)致用戶喪失耐心而流失。
彈窗可以按照是否強(qiáng)制打斷用戶操作來(lái)分成兩種，模態(tài)彈窗和非模態(tài)彈窗（也可以叫做阻斷式彈窗和非阻斷式彈窗）。
模態(tài)彈窗：模態(tài)提供了一個(gè)專注聚焦的環(huán)境，用戶只有完成或者關(guān)閉當(dāng)前任務(wù)，才能進(jìn)行其他任務(wù)。
特點(diǎn)：打斷用戶當(dāng)前的操作流程，屬于強(qiáng)勢(shì)的干擾行為，故運(yùn)用彈窗需要慎重考慮。
常用組件：dialog（對(duì)話框）/alert(警告框)、popover（浮出層）、action sheet（動(dòng)作菜單）、activity views（活動(dòng)視圖）、modal bottom sheet（模態(tài)底部菜單）。
非模態(tài)彈窗：常用于輕量級(jí)的操作反饋和信息傳遞，不需要獲取屏幕焦點(diǎn)，用戶可以同時(shí)操作屏幕中的其他內(nèi)容。
特點(diǎn)：屬于輕量級(jí)的反饋，不會(huì)對(duì)用戶流程產(chǎn)生干擾，但同時(shí)又給了用戶反饋和信息。
常用組件：Toast（吐司），snackbar，Hud（透明指示層）。
dialog和alert分別是MD和ios的官方彈出框，是最常見(jiàn)的彈窗，兩者功能一樣，在使用上以及樣式上略有區(qū)別（下文分析統(tǒng)一稱為彈出框）。
彈出框通常用來(lái)傳達(dá)和app及設(shè)備相關(guān)的重要信息，并且要求用戶操作或反饋，且其出現(xiàn)在屏幕中央，對(duì)內(nèi)容遮擋嚴(yán)重，會(huì)中斷用戶正常操作。用戶只有完成或者關(guān)閉當(dāng)前任務(wù)，才能進(jìn)行其他任務(wù)。
其官方樣式如下：
4.1.1 使用場(chǎng)景
通知用戶app或設(shè)備相關(guān)的問(wèn)題：
通過(guò)強(qiáng)干擾通知用戶設(shè)備相關(guān)問(wèn)題如備份，低電量等問(wèn)題；這些潛在問(wèn)題可能會(huì)對(duì)用戶造成一定負(fù)面的影響。
再比如app的版本更新，消息通知，首飾引導(dǎo)等都關(guān)系到用戶的利益，所以也會(huì)用強(qiáng)干擾的方式讓用戶明確知道并選擇。
輔助用戶完成任務(wù)，如系統(tǒng)權(quán)限：
用戶在進(jìn)行任務(wù)的過(guò)程中，受到阻攔，必須通過(guò)其他輔助操作幫助他完成任務(wù)。
如完成一些任務(wù)必須要開(kāi)啟相應(yīng)的系統(tǒng)權(quán)限：上傳照片要開(kāi)啟相冊(cè)權(quán)限；拍小視頻要麥克風(fēng)權(quán)限；出行外賣等產(chǎn)品要開(kāi)啟定位權(quán)限；新建相冊(cè)必須要為相冊(cè)命名；下載app要登錄itunes賬號(hào)。
用戶主動(dòng)中斷任務(wù)，破壞性操作等：
用戶中斷當(dāng)前任務(wù)，對(duì)之前的操作有一定的影響，或者一些無(wú)法挽回的破壞性操作，故需強(qiáng)干擾的彈窗通知，避免用戶因?yàn)槭д`有了不可挽回的損失。如退出賬號(hào)；刪除訂單，活動(dòng)消息等；放棄編輯。
操作反饋：
當(dāng)操作后的反饋比較重要，會(huì)影響用戶接下來(lái)的操作或會(huì)影響當(dāng)下的任務(wù)，那就需要用強(qiáng)干擾讓用戶明確知道，要完成此操作需要什么，或者接下來(lái)會(huì)發(fā)生什么。
例如西瓜視頻的結(jié)算通過(guò)強(qiáng)干擾通知到用戶想要結(jié)算應(yīng)該怎么做。
運(yùn)營(yíng)活動(dòng)：
現(xiàn)在用彈出框來(lái)傳遞運(yùn)營(yíng)活動(dòng)已經(jīng)成為一個(gè)約定俗成的用法了，雖然ios規(guī)范中建議盡量少用彈出框，但公司還是要盈利的，所以基本上所有app都會(huì)以這種強(qiáng)干擾的形式來(lái)通知用戶“這里有優(yōu)惠活動(dòng)”等運(yùn)營(yíng)活動(dòng)。
這種場(chǎng)景下，彈出框會(huì)根據(jù)產(chǎn)品以及業(yè)務(wù)的運(yùn)營(yíng)需求及產(chǎn)品的調(diào)性做豐富的運(yùn)營(yíng)設(shè)計(jì)，來(lái)吸引用戶參加運(yùn)營(yíng)活動(dòng)，需要注意的一點(diǎn)，需要用戶參加的buttom一定要加強(qiáng)，突出。
功能引導(dǎo)：
功能引導(dǎo)和運(yùn)營(yíng)活動(dòng)一樣，是產(chǎn)品出于業(yè)務(wù)角度考慮，用強(qiáng)干擾的方式吸引用戶使用某功能，達(dá)到一定的業(yè)務(wù)目標(biāo)，如用戶活躍度。
例如完成訂單后（外賣或商品）引導(dǎo)用戶評(píng)價(jià)，并給予一定獎(jiǎng)勵(lì)。如將流量引流到新業(yè)務(wù)，從而達(dá)到新業(yè)務(wù)推廣目的。
浮出層是ios的組件，是用戶點(diǎn)擊屏幕上的某個(gè)控件或區(qū)域出現(xiàn)在屏幕上方的臨時(shí)視圖，它最典型的是包含一個(gè)指向它出現(xiàn)位置的箭頭，且浮出層一般在入口下方，整個(gè)浮出層應(yīng)該位于整個(gè)屏幕的中上方。
浮出層最開(kāi)始主要用于大屏幕的ipad，但由于手機(jī)屏幕越來(lái)越大，目前也被較多地運(yùn)用到手機(jī)界面中。
4.2.1 使用場(chǎng)景
多個(gè)常用操作的快捷入口：
多個(gè)常用操作通過(guò)popover折疊起來(lái)，視覺(jué)上更清爽簡(jiǎn)潔，同時(shí)使用起來(lái)也方便，缺點(diǎn)是用戶不能直觀看到，需要一定的學(xué)習(xí)才能掌握，所以適合于有學(xué)習(xí)能力用戶群的產(chǎn)品
呈現(xiàn)頁(yè)面中一些折疊的信息：
屬于浮出層的衍生應(yīng)用，和上個(gè)場(chǎng)景一樣，節(jié)約屏幕空間，顯露出一部分，并將剩余信息折疊起來(lái)，不影響用戶理解功能，又解決了屏幕空間，若用戶有需求，即可展開(kāi)探索更多的信息，同樣也會(huì)用箭頭等指向出處
對(duì)于新用戶的功能引導(dǎo)或者新功能的引導(dǎo)：
此類場(chǎng)景也屬于浮出層的衍生應(yīng)用，主要通過(guò)帶指向箭頭的浮層引導(dǎo)用戶學(xué)習(xí)某個(gè)功能，一般需要學(xué)習(xí)的功能是高亮的，且箭頭指向它。
actionsheet是ios系統(tǒng)中特定的警告框，用來(lái)響應(yīng)動(dòng)作或控件，或者呈現(xiàn)和當(dāng)前內(nèi)容相關(guān)的兩個(gè)及更多的選項(xiàng)。一般在屏幕底部。官方不建議在動(dòng)作菜單中應(yīng)用滾動(dòng)條，所以動(dòng)作菜單中的選項(xiàng)不能過(guò)多。
4.3.1 使用場(chǎng)景
當(dāng)前對(duì)象的多個(gè)操作或者完成任務(wù)的多個(gè)選擇：
對(duì)當(dāng)前對(duì)象的的多個(gè)操作，如qq中對(duì)圖片長(zhǎng)按，出現(xiàn)多個(gè)對(duì)該圖片可進(jìn)行的操作，幫助完成任務(wù)。除了文字列表外，還可以用圖標(biāo)+宮格式的展示方式，例如分享功能的多個(gè)選項(xiàng)。
執(zhí)行潛在的破壞性操作前的二次確認(rèn)：
當(dāng)執(zhí)行潛在的破壞性操作前需再做提醒，避免產(chǎn)生不可挽回的失誤。需注意的是破壞性操作的按鈕需重點(diǎn)突出，一般用紅色，起到警示，危險(xiǎn)的提醒作用
和alert的區(qū)別：
alert主要適用于兩個(gè)選項(xiàng)，而actionsheet可以有多個(gè)功能選項(xiàng)，且展示形式更多樣。前文講過(guò)，alert也有破壞性操作提醒的場(chǎng)景使用。
兩者相比，alert出現(xiàn)在屏幕中央，actionsheet出現(xiàn)在屏幕底部。視覺(jué)角度上alert相較于actionsheet更有阻斷感，對(duì)用戶而言干擾性更大。
另一方面底部的actionsheet從手勢(shì)操作的角度上來(lái)看，操作更方便，更容易對(duì)此作出選擇或關(guān)閉。所以alert更加適用于嚴(yán)重后果的破壞性操作提醒。
活動(dòng)視圖是ios組件，是針對(duì)當(dāng)前頁(yè)面提供的一系列任務(wù)和服務(wù)，例如復(fù)制，收藏，查找等。系統(tǒng)提供了許多內(nèi)置活動(dòng)，包括打印，信息和AirPlay。
這些任務(wù)始終首先出現(xiàn)在活動(dòng)視圖中，無(wú)法重新排序。無(wú)需創(chuàng)建執(zhí)行這些內(nèi)置任務(wù)的自定義活動(dòng)。活動(dòng)視圖還顯示來(lái)自其他應(yīng)用的共享和操作擴(kuò)展。
Bottom sheet是MD的組件，MD中底部菜單有兩種，一種是Standard bottom sheet（標(biāo)準(zhǔn)底部菜單），另一種是Modal bottom sheet（模態(tài)底部菜單）。
MD的模態(tài)底部菜單和iOS的action sheet類似，它阻止用戶與屏幕其他地方交互，通過(guò)聚焦的底部菜單提供了更多的選項(xiàng)和功能。它可以是內(nèi)聯(lián)菜單和簡(jiǎn)單對(duì)話框的替代方案，為內(nèi)容，圖標(biāo)和動(dòng)作提供了額外的空間。
規(guī)范建議，模態(tài)底部淡淡的初始垂直位置的上限為屏幕高度的50％。內(nèi)容超過(guò)屏幕高度50％的模態(tài)菜單可以在整個(gè)屏幕上拉動(dòng)，在內(nèi)部滾動(dòng)以訪問(wèn)其余項(xiàng)目。同樣他的展現(xiàn)方式有列表式，也可有宮格式
snackbar是android專有控件，是出現(xiàn)在屏幕底部的提供有關(guān)app相關(guān)的簡(jiǎn)短信息提醒，它屬于輕量級(jí)的信息提醒，一般出現(xiàn)幾秒后就會(huì)自動(dòng)消失，不會(huì)中斷用戶操作。
snackbar往往由一條文案+一個(gè)引導(dǎo)性按鈕（可選，按鈕可以引導(dǎo)用戶進(jìn)一步操作）組成，帶有一定的交互性。因?yàn)樗詣?dòng)會(huì)消失，所以它一定沒(méi)有取消或者不要等否定性按鈕。
4.6.1 使用場(chǎng)景
傳達(dá)輕量級(jí)的信息和操作反饋，可以引導(dǎo)用戶操作：
傳達(dá)輕量級(jí)的信息或反饋，并且可以引導(dǎo)用戶進(jìn)行下一步行為，但并不強(qiáng)制用戶操作。比如chrome添加書簽時(shí)，可以進(jìn)一步對(duì)新加的書簽進(jìn)行編輯；刪除書簽時(shí)防止用戶后悔，提供一個(gè)撤銷按鈕。
Toast是android專有的控件，原先的MD規(guī)范中，toast是和snackbar放在一起講的，翻閱了最新的MD規(guī)范，snackbar里找不到關(guān)于toast的相關(guān)介紹（有小伙伴找到的望提醒一下）。
Toast應(yīng)該包含在snackbar里了，當(dāng)snackbar沒(méi)有按鈕其實(shí)就是toast了，不過(guò)這邊還是把Toast單獨(dú)拿出來(lái)分析
4.7.1 使用場(chǎng)景
傳達(dá)輕量級(jí)的信息和操作反饋，且不需要用戶操作：
適用于通知用戶不重要的信息和操作反饋，且不會(huì)對(duì)用戶當(dāng)前的任務(wù)有影響，因?yàn)椴荒芙换ィ規(guī)酌牒笙В杂脩艉芸赡芎雎裕栽擃愋畔⑾鄬?duì)而言沒(méi)那么重要。
雖然toast是android專有樣式，但現(xiàn)在很多ios版本的系統(tǒng)中都使用了改良版的“toast”，因?yàn)檩p反饋，不打斷用戶操作，同時(shí)又能通知信息和操作反饋，對(duì)用戶而言及其友好，但是不易傳達(dá)過(guò)多的文字，因?yàn)橛脩艉苡锌赡軙?huì)忽略。
ios文檔中的feedback中有建議：反饋可以幫助人們了解應(yīng)用正在做什么，發(fā)現(xiàn)他們下一步可以做什么，并了解行動(dòng)的結(jié)果。所以實(shí)際應(yīng)用中，既要不打擾用戶，又要能引起用戶注意，還要和產(chǎn)品設(shè)計(jì)相協(xié)調(diào)。
比如結(jié)合了文字和icon的樣式，再比如用較為突出的背景色，位置的話在中央，頂部，底部，都會(huì)出現(xiàn)，會(huì)根據(jù)具體的業(yè)務(wù)來(lái)選擇合適的位置。一般出現(xiàn)的位置會(huì)和操作內(nèi)容在一起，這樣用戶才能清晰有效地得到即時(shí)反饋。
下方例舉的toast案例因?yàn)檫x用了比內(nèi)容更為突出的背景色，相比較上方案例的toast更易被用戶發(fā)現(xiàn)和察覺(jué)，達(dá)到通知用戶的目的。
Hud透明指示層，ios專用控件，典型的就是音量調(diào)節(jié)的彈窗樣式。部分改良的toast，在樣式上有借鑒學(xué)習(xí)Hud。
Dialog/Alert：
當(dāng)信息或操作非常重要，并且必須要由用戶做決定或者操作才能繼續(xù)，一般用alert，更適用于用戶判斷選擇。
Modal bottom sheet/Action sheet：
稍弱于dialog/alert，更著重于提供更多的功能和選項(xiàng)時(shí)使用。
Activity view：
是針對(duì)當(dāng)前頁(yè)面提供的一系列額外的任務(wù)和服務(wù)。
Popover：
使用更側(cè)重于指向性，更適用于信息或功能折疊。
Toast：
不太重要的信息提醒和操作反饋，更適用于不需用戶響應(yīng)或反饋的場(chǎng)景。
snackbar：
不太重要的信息提醒和操作反饋，可以交互，但并不強(qiáng)制，更適用于可以引導(dǎo)用戶進(jìn)行下一步或者一些撤銷上一步的場(chǎng)景。
Hud：
音量調(diào)節(jié)。
了解了每個(gè)彈窗組件的用法，下次就可以根據(jù)實(shí)際業(yè)務(wù)設(shè)計(jì)合適的彈窗了，不過(guò)官方規(guī)范或者文章的建議也都只是參考，實(shí)際工作中還是要靈活變通，設(shè)計(jì)的目標(biāo)是幫助用戶更好更快的解決問(wèn)題。
以上就是我對(duì)彈窗相關(guān)知識(shí)的總結(jié)，總結(jié)的過(guò)程中也對(duì)官方規(guī)范彈窗部分的內(nèi)容再次熟悉了好幾遍，因?yàn)榭吹挠⑽模岳斫馍峡赡苌晕⒂行┎蛔悖胁粚?duì)的地方，還希望大家批評(píng)指正。（推薦大家多看看官方設(shè)計(jì)規(guī)范，就像一本非常實(shí)用的設(shè)計(jì)工具書，對(duì)于實(shí)際工作還是非常有幫助的）
再次感謝前輩的經(jīng)驗(yàn)分享！
這個(gè)控件叫什么系列之toast的曾經(jīng)，現(xiàn)在，與未來(lái) https://www.uisdc.com/ui-element-toast
如何設(shè)計(jì)App中的提示控件（toast） https://zhuanlan.zhihu.com/p/22405748
iOS和Android規(guī)范解析——底部浮層（上）https://www.jianshu.com/p/8bdfbc0a9339
iOS和Android規(guī)范解析——提示框（Toast）對(duì)比 https://www.jianshu.com/p/e1beeacbea32
不要濫用對(duì)話框！細(xì)說(shuō) iOS Alert View 與 Action Sheet https://zhuanlan.zhihu.com/p/20189186
App設(shè)計(jì)中，6組常見(jiàn)組件的區(qū)別和用法 http://www.woshipm.com/pd/873075.html
APP提示框架詳解：Toast提示、Snackers和Alert http://www.woshipm.com/pmd/296674.html
本文由 @麥子_Maizi 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
1），彈窗及參數(shù)說(shuō)明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打開(kāi)新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow=window.open("newTest.html",
"彈到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 彈出新窗口的命令
(01) newTest.html 彈出窗口的文件名，或請(qǐng)求地址
(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側(cè)的像素值
(07) toolbar=no 是否顯示工具欄，yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動(dòng)欄
(10) resizable=no 是否允許改變窗口大小，yes為允許
(11) location=no 是否顯示地址欄，yes為允許
(12) status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開(kāi)），yes為允許
***/
</script>
</html>
（2），彈窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop=(window.screen.availHeight - 30 - 500) / 2;
var iLeft=(window.screen.availWidth - 10 - 800) / 2; //減width
var openWindow=window.open("newTest.html"
,"測(cè)試彈窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
（3），窗口 location屬性
window對(duì)象location屬性是引用Location對(duì)象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當(dāng)前窗口顯示指定頁(yè)面
window.close(); //關(guān)閉本頁(yè)面（4），窗口與父窗口通信
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
