|
1.//1,、最基本的彈出窗口代碼 2. 3.window.open ('page.html') 4. 5. 6. //2、經(jīng)過設(shè)置后的彈出窗口 7. 8.window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //這句要寫成一行 9. 10. 11. //參數(shù)解釋： 12. //window.open 彈出新窗口的命令,； 13. //'page.html' 彈出窗口的文件名,； 14. //'newwindow' 彈出窗口的名字（不是文件名），非必須,，可用空''代替,； 15. //height=100 窗口高度,； 16. //width=400 窗口寬度； 17. //top=0 窗口距離屏幕上方的象素值,； 18. //left=0 窗口距離屏幕左側(cè)的象素值,； 19. //toolbar=no 是否顯示工具欄，yes為顯示,； 20. //menubar，scrollbars 表示菜單欄和滾動(dòng)欄,。 21. //resizable=no 是否允許改變窗口大小,，yes為允許； 22. //location=no 是否顯示地址欄,，yes為允許； 23. //status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開）,，yes為允許,； 24. 25. //3,、用函數(shù)控制彈出窗口 26. 27. function openwin() { 28. window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //寫成一行 29. } 30. $(document).ready(fucntion(){ 31. openwin(); 32. }); 33. 34. //這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個(gè)窗口。在調(diào)用它之前沒有任何用途,。怎么調(diào)用呢,？ 35. 36. //方法一：<body onload="openwin()"> 瀏覽器讀頁面時(shí)彈出窗口； 37. //方法二：<body onunload="openwin()"> 瀏覽器離開頁面時(shí)彈出窗口,； 38. //方法三：用一個(gè)連接調(diào)用： 39. //<a href="#" onclick="openwin()">打開一個(gè)窗口</a> 40. //注意：使用的“#”是虛連接,。 41. //方法四：用一個(gè)按鈕調(diào)用： 42. //<input type="button" onclick="openwin()" value="打開窗口"> 43. 44. //4、同時(shí)彈出2個(gè)窗口 45. 46. function openwin() { 47. window.open("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//寫成一行 48. window.open("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//寫成一行 49. } 50. 51. //為避免彈出的2個(gè)窗口覆蓋,，用top和left控制一下彈出的位置不要相互覆蓋即可 ,。最后用上面說過的四種方法調(diào)用即可。 52. //注意：2個(gè)窗口的name(newwindows和newwindow2)不要相同,，或者干脆全部為空,。 53. 54. //5、主窗口打開文件1.htm,，同時(shí)彈出小窗口page.html 55. 56. function openwin() { 57. window.open("page.html", "", "width=200,height=200") 58. } 59. 60. //調(diào)用：<a href="1.htm" onclick="openwin()">open</a> 61. 62. //6,、彈出的窗口之定時(shí)關(guān)閉控制 63. 64. //下面我們?cè)賹?duì)彈出的窗口進(jìn)行一些控制，效果就更好了,。如果我們?cè)賹⒁恍《?/span> 代碼加入彈出的頁面(注意是加入page.html的HTML中,，不是主頁面中),，讓它10秒后自動(dòng)關(guān)閉是不是更酷了？ 65. //首先,，將如下代碼加入page.html文件的<head>區(qū)： 66. function closeit() { 67. setTimeout("self.close()", 10000) //毫秒 68. } 69. //頁面加載完成調(diào)用關(guān)閉事件 70. $(document).ready(fucntion(){ 71. closeit(); 72. }); 73. 74. //7,、在彈出窗口中加上一個(gè)關(guān)閉按鈕 75. 76. //<INPUT TYPE='BUTTON' VALUE='關(guān)閉' onClick='window.close()'> 77. 78. 79. //8,、內(nèi)包含的彈出窗口-一個(gè)頁面兩個(gè)窗口 80. 81. //上面的例子都包含兩個(gè)窗口,，一個(gè)是主窗口，另一個(gè)是彈出的小窗口,。通過下面的例子,，你可以在一個(gè)頁面內(nèi)完成上面的效果。 82. 83. function openwin() { 84. OpenWindow = window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars=" + scroll + ",menubar=no"); 85. //寫成一行 86. OpenWindow.document.write("<TITLE>例子</TITLE>") 87. OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 88. OpenWindow.document.write("<h1>Hello!</h1>") 89. OpenWindow.document.write("New window opened!") 90. OpenWindow.document.write("</BODY>") 91. OpenWindow.document.write("</HTML>") 92. OpenWindow.document.close() 93. } 94. 95. //<a href="#" onclick="openwin()">打開一個(gè)窗口</a> 96. //<input type="button" onclick="openwin()" value="打開窗口"> 97. 98. 99. //9,、終極應(yīng)用--彈出的窗口之Cookie控制 100. 101. //回想一下,，上面的彈出窗口雖然酷，但是有一點(diǎn)小毛病,，比如你將上面的腳本放在一個(gè)需要頻繁經(jīng)過的頁面里(例如首頁),，那么每次刷新這個(gè)頁面，窗口都會(huì)彈出一次,，我們使用cookie來控制一下就可以了,。 102. //首先，將如下代碼加入主頁面HTML的<HEAD>區(qū)： 103. 104. function openwin() { 105. window.open("page.html", "", "width=200,height=200") 106. } 107. function get_cookie(Name) { 108. var search = Name + "=" 109. var returnvalue = ""; 110. if (document.cookie.length > 0) { 111. offset = document.cookie.indexOf(search) 112. if (offset != -1) { 113. offset += search.length 114. end = document.cookie.indexOf(";", offset); 115. if (end == -1) 116. end = document.cookie.length; 117. returnvalue = unescape(document.cookie.substring(offset, end)) 118. } 119. } 120. return returnvalue; 121. } 122. function loadpopup() { 123. if (get_cookie('popped') == '') { 124. openwin() 125. document.cookie = "popped=yes" 126. } 127. } 128. 129. //然后,，用<body onload="loadpopup()">（注意不是openwin而是loadpop?。。┨鎿Q主頁面中原有的<BODY>這一句即可,。你可以試著刷新一下這個(gè)頁面或重新進(jìn)入該頁面,，窗口再也不會(huì)彈出了。真正的Pop-Only-Once,！
|
|
|
