DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS彈出窗口代碼大全(詳細整理)
JS彈出窗口代碼大全(詳細整理)
編輯：關於JavaScript     
如何利用網頁彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎麼搞出來的，我們今天就來學習一下：
1.彈啟一個全屏窗口
復制代碼 代碼如下:
<html>
<body http://www.jb51.net','','fullscreen');">;
<b>www.jb51.net</b>
</body>
</html>

2.彈啟一個被F11化後的窗口
復制代碼 代碼如下:
<html>
<body 'http://www.jb51.net','','channelmode');">;
<b>www.jb51.net</b>
</body>
</html>

3.彈啟一個帶有收藏鏈接工具欄的窗口
復制代碼 代碼如下:
<html>
<body www.wangye8.com','','width=400,height=300,directories');">
<b>www.wangye8.com</b>
</body>
</html>

4.網頁對話框
復制代碼 代碼如下:
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog('http://www.jb51.net,'','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>www.wangye8.com</b>
</body>
</html>
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog('http://www.jb51.net,'','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.wangye8.com</b>
</body>
</html>

showModalDialog()或是showModelessDialog() 來調用網頁對話框，至於showModalDialog()與showModelessDialog()的區別，在於showModalDialog()打開的窗口（簡稱模式窗口），置在父窗口上，必須關閉才能訪問父窗口(建議盡量少用，以免招人反感)；showModelessDialog()
dialogHeight: iHeight 設置對話框窗口的高度。
dialogWidth: iWidth 設置對話框窗口的寬度。
dialogLeft: iXPos 設置對話框窗口相對於桌面左上角的left位置。
dialogTop: iYPos 設置對話框窗口相對於桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。
help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對於非模式對話框窗口，默認值是“yes”；對於模式對話框窗口，默認值是 “no”。

5、其他彈出窗口代碼
經常上網的朋友可能到過這樣一些網站，一進入首頁立刻會彈出一個窗口，或者按一個鏈接或按鈕彈出，通常在這個窗口裡會顯示一些注意事項、版權信息、警告、歡迎光顧之類的話或者作者想要特別提示的信息。其實制作這樣的頁面非常容易，只要往該頁面的HTML裡加入幾段java script代碼即可實現。下面我就帶你剖析它的奧秘。

【最基本的彈出窗口代碼】
其實代碼非常簡單：
復制代碼 代碼如下:
<SCRIPT LANGUAGE="java script">
<!--
window.open ('page.html')
-->
</SCRIPT>

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

【經過設置後的彈出窗口】
下面再說一說彈出窗口外觀的設置。只要再往上面的代碼中加一點東西就可以了。
我們來定制這個彈出窗口的外觀、尺寸大小、彈出位置以適應該頁面的具體情況。
復制代碼 代碼如下:
<SCRIPT LANGUAGE="java 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>

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

【用函數控制彈出窗口】
下面是一個完整的代碼。
復制代碼 代碼如下:
<html>
<head>
<script LANGUAGE="java script">
<!--
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 >
...任意的頁面內容...
</body>
</html>

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

【主窗口打開文件1.htm，同時彈出小窗口page.html】
將如下代碼加入主窗口<head>區：
復制代碼 代碼如下:
<script language="java script">
<!--
function openwin(){
window.open("page.html","","width=200,height=200" ;)
}
//-->
</script>

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

【彈出的窗口之定時關閉控制】
下面我們再對彈出窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面（注意是加入到page.html的HTML中，可不是主頁面中，否則…），讓它在10秒鐘後自動關閉是不是更酷了？
首先，將如下代碼加入page.html文件的<head>區：
復制代碼 代碼如下:
<script language="java script">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>

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

【在彈出窗口中加上一個關閉按鈕】
復制代碼 代碼如下:
<form>
<INPUT TYPE='BUTTON' value='關閉'
</form>

呵呵，現在更加完美了！
【內包含的彈出窗口——一個頁面兩個窗口】
上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
通過下面的例子，你可以在一個頁面內完成上面的效果。
復制代碼 代碼如下:
<html>
<head>
<SCRIPT LANGUAGE="java script">
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="#" >打開一個窗口</a>
<input type="button" value="打開窗口">
</body>
</html>

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

【終極應用——彈出窗口的Cookie控制】
回想一下，上面的彈出窗口雖然酷，但是有一點小毛病（你沉浸在喜悅之中，一定沒有發現吧？）比如你將上面的腳本放在一個需要頻繁經過的頁面裡（例如首頁），那麼每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？有解決的辦法嗎？Yes!Follow me。我們使用Cookie來控制一下就可以了。
首先，將如下代碼加入主頁面HTML的<HEAD>區：
復制代碼 代碼如下:
<script>
function openpopup(){
window.open("hello.htm","","width=300,height=300") //自己修改彈出窗口
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = documents.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
documents.cookie="popped=yes"
}
}
</script>
</head>

將如下代碼鍵入BODY區：
<body > //pop when leave page
或者：
<body > //pop when enter page
你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once!
寫到這裡，彈出窗口的制作和應用技巧基本上算是講完了，希望對正在制作網頁的朋友有所幫助我就非常欣慰了。
需要注意的是，JS腳本中的大小寫最好前後保持一致。
沒有菜單、工具欄、地址欄的彈出窗口：
復制代碼 代碼如下:
<script language="java script">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=500,height=500,resizable=0,scrollbars=auto'); // width=500,height=500為窗口長和寬
if (popup != null) {
if (popup.opener == null) {
popup.opener = self; }
popup.location.href = '要打開的文件名';
}
// -->
</script>

方法二:Cookies應用：控制彈出窗口 當我們在一個頁面中設置一個POP彈出窗口後，每次只要重新浏覽該頁面，POP窗口就會自動彈出來，造成不必要的麻煩。那麼怎麼解決這個問題呢？ 我在這裡用一個簡單的例子講解一下如何通過操作Cookies讓彈出窗口只在第一次浏覽該頁面時彈出，以後就不再招人煩了！
<script> function openpopwindow() { window.open("hello.htm","","width=200,height=200" //自己修改彈出窗口 } function get_cookie(Name) { var search = Name + "="; var returnvalue = ""; if (documents.cookie.length > 0) { offset = documents.cookie.indexOf(search); if (offset != -1) { // 如果以前有cookies記錄 offset += search.length; // 設置cookie的起始位置 end = documents.cookie.indexOf(";", offset); // 設置cookie的結束位置 if (end == -1) end = documents.cookie.length; returnvalue=unescape(documents.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup() { if (get_cookie('popped')=='') { openpopwindow(); documents.cookie="popped=yes"; } } </script>
將上面的代碼鍵入BODY區： <body > //離開頁面的時候彈出
或者： <body > //打開頁面的時候彈出

【本文版權歸作者與奧索網共同擁有，如需轉載，請注明作者及出處】
離開頁面時彈開窗口效果:
效果：別人關閉這個頁面的時候，彈出一個窗口，你可以寫一些祝福的話
核心代碼：
復制代碼 代碼如下:
<script LANGUAGE="javascript">
<!--Begin function leave(){
window.open
('1.htm',",'toolbar=no,menubar=no,location=no,height=225,width=235');
break
}
//END-->
</script>

如何利用網頁彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎麼搞出來的，我們今天就來學習一下：
1.彈啟一個全屏窗口
復制代碼 代碼如下:
<html>
<body http://www.jb51.net','','fullscreen');">;
<b>www.jb51.net</b>
</body>
</html>

2.彈啟一個被F11化後的窗口
復制代碼 代碼如下:
<html>
<body 'http://www.jb51.net','','channelmode');">;
<b>www.jb51.net</b>
</body>
</html>

3.彈啟一個帶有收藏鏈接工具欄的窗口
復制代碼 代碼如下:
<html>
<body www.wangye8.com','','width=400,height=300,directories');">
<b>www.wangye8.com</b>
</body>
</html>

4.網頁對話框
復制代碼 代碼如下:
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog('http://www.jb51.net,'','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>www.wangye8.com</b>
</body>
</html>
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog('http://www.jb51.net,'','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>http://www.wangye8.com</b>
</body>
</html>

showModalDialog()或是showModelessDialog() 來調用網頁對話框，至於showModalDialog()與showModelessDialog()的區別，在於showModalDialog()打開的窗口（簡稱模式窗口），置在父窗口上，必須關閉才能訪問父窗口(建議盡量少用，以免招人反感)；showModelessDialog()
dialogHeight: iHeight 設置對話框窗口的高度。
dialogWidth: iWidth 設置對話框窗口的寬度。
dialogLeft: iXPos 設置對話框窗口相對於桌面左上角的left位置。
dialogTop: iYPos 設置對話框窗口相對於桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。
help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對於非模式對話框窗口，默認值是“yes”；對於模式對話框窗口，默認值是 “no”。
5、其他彈出窗口代碼
經常上網的朋友可能到過這樣一些網站，一進入首頁立刻會彈出一個窗口，或者按一個鏈接或按鈕彈出，通常在這個窗口裡會顯示一些注意事項、版權信息、警告、歡迎光顧之類的話或者作者想要特別提示的信息。其實制作這樣的頁面非常容易，只要往該頁面的HTML裡加入幾段java script代碼即可實現。下面我就帶你剖析它的奧秘。

【最基本的彈出窗口代碼】
其實代碼非常簡單：
復制代碼 代碼如下:
<SCRIPT LANGUAGE="java script">
<!--
window.open ('page.html')
-->
</SCRIPT>

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

【經過設置後的彈出窗口】
下面再說一說彈出窗口外觀的設置。只要再往上面的代碼中加一點東西就可以了。
我們來定制這個彈出窗口的外觀、尺寸大小、彈出位置以適應該頁面的具體情況。
復制代碼 代碼如下:
<SCRIPT LANGUAGE="java 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>

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

【用函數控制彈出窗口】
下面是一個完整的代碼。
復制代碼 代碼如下:
<html>
<head>
<script LANGUAGE="java script">
<!--
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 >
...任意的頁面內容...
</body>
</html>

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

【主窗口打開文件1.htm，同時彈出小窗口page.html】
將如下代碼加入主窗口<head>區：
復制代碼 代碼如下:
<script language="java script">
<!--
function openwin(){
window.open("page.html","","width=200,height=200" ;)
}
//-->
</script>

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

【彈出的窗口之定時關閉控制】
下面我們再對彈出窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面（注意是加入到page.html的HTML中，可不是主頁面中，否則…），讓它在10秒鐘後自動關閉是不是更酷了？
首先，將如下代碼加入page.html文件的<head>區：
復制代碼 代碼如下:
<script language="java script">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>

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

【在彈出窗口中加上一個關閉按鈕】
復制代碼 代碼如下:
<form>
<INPUT TYPE='BUTTON' value='關閉'
</form>

呵呵，現在更加完美了！

【內包含的彈出窗口——一個頁面兩個窗口】
上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。
通過下面的例子，你可以在一個頁面內完成上面的效果。
復制代碼 代碼如下:
<html>
<head>
<SCRIPT LANGUAGE="java script">
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="#" >打開一個窗口</a>
<input type="button" value="打開窗口">
</body>
</html>

看看OpenWindow.document.write()裡面的代碼不就是標准的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標簽或少一個標簽都會出現錯誤。記住用OpenWindow.document.close()結束啊。
關於JavaScript
Google 地圖類型詳解及示例代碼
Google 地圖類型Google 地圖- 基本地圖類型Google Maps API 中提供了以下
jsMind通過鼠標拖拽的方式調整節點位置
jsMind是一個純javascript實現的思維導圖類庫，基於html5的canvas實現，以BS
js獲取內聯樣式的方法教程
本文實例講述了js獲取內聯樣式的方法。分享給大家供大家參考。具體實現方法如下： 代碼如下:<!

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
javascript 分號總結及詳細介紹 js數值計算時使用parseInt進行數據類型轉換(jquery) 用js動態添加html元素,以及屬性的簡單實例 node.js開發中使用Node Supervisor實現監測文件修改並自動重啟應用 javascript顯式類型轉換實例分析 js 禁用只讀文本框獲得焦點時的退格鍵 鼠標經過顯示二級菜單js特效 javascript中等於（==）與全等（===）的區別說明 MooTools教程(5):事件處理 BootStrap的JS插件之輪播效果案例詳解
熱門推薦
js 數組去重的四種實用方法 JS特權方法定義作用以及與公有方法的區別 JavaScript的事件代理和委托實例分析 javascript實現了照片拖拽點擊置頂的照片牆代碼 JavaScript 命名空間 使用介紹 js 獲取范圍內的隨機數實例代碼 Node.js開發之訪問Redis數據庫教程 javascript檢測是否聯網的實現代碼 JS實現的另類手風琴效果網頁內容切換代碼
大家都在看
jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版 基於JavaScript實現樹形下拉框 AJAX案例研究之google suggest CSS應用基礎教程(6) 區塊性質 js裝載xml文件然後發向服務器的實現代碼 jQuery each() 遍歷方法實例 CSS中的!important屬性 IIS7會重用那些不該重用HttpHandler
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved