當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

最基本的弹出窗口代码

發(fā)布時(shí)間：2025/4/16 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了最基本的弹出窗口代码小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!--

window.open ('page.html')

-->

</SCRIPT>

因?yàn)檫@是一段javascript代碼，所以它們應(yīng)該放在<SCRIPTLANGUAGE ="javascript">標(biāo)簽和</script>之間。

是對(duì)一些版本低的瀏覽器起作用，在這些老瀏覽器中如果不支持javascript，不會(huì)將標(biāo)簽中的代碼作

為文本顯示出來。

Window.open ('page.html')用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面

應(yīng)寫明路徑，絕對(duì)路徑(錯(cuò)誤！超鏈接引用無效。)和相對(duì)路徑(../)均可。

用單引號(hào)和雙引號(hào)都可以，只是不要混用。

這一段代碼可以加入HTML的任意位置，加入到<head>和</head>之間也可以，位置越靠前執(zhí)行越早，尤其是頁面

代碼較長時(shí)，又想使頁面早點(diǎn)彈出就盡量往前放。

【經(jīng)過設(shè)置后的彈出窗口】

下面再說一說彈出窗口外觀的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。

我們來定制這個(gè)彈出窗口的外觀、尺寸大小、彈出位置以適應(yīng)該頁面的具體情況。

<!--

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>

參數(shù)解釋：

<SCRIPT LANGUAGE="java script"> js腳本開始；

window.open 彈出新窗口的命令；

page.html 彈出新窗口的文件名；

newwindow 彈出窗口的名字（不是文件名），可用空〃代替；

height=100 窗口高度；

top=0 窗口距離屏幕上方的像素值；

left=0 窗口距離屏幕左側(cè)的像素值；

toolbar=no 是否顯示工具欄，yes為顯示；

menubar,scrollbars 表示菜單欄和滾動(dòng)欄；

resizable=no 是否允許改變窗口大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；

</SCRIPT> js腳本結(jié)束。

【用函數(shù)控制彈出窗口】

下面是一個(gè)完整的代碼。

<html>

<head>

<!--

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>

...任意的頁面內(nèi)容...

</body>

</html>

這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個(gè)窗口。在調(diào)用它之前沒有任何用途。怎么調(diào)用呢？

方法一：<body οnlοad="openwen()"> 瀏覽器讀頁面時(shí)彈出窗口；

方法二：<body οnunlοad="openwen()"> 瀏覽器離開頁面時(shí)彈出窗口；

方法三：用一個(gè)連接調(diào)用：<a href="#"οnclick="openwin()">打開一個(gè)窗口</a>

注意：使用的"#"是虛連接。

方法四：用一個(gè)按鈕調(diào)用：<input type="button"οnclick="openwin()" value="打開窗口">

【主窗口打開文件1.htm，同時(shí)彈出小窗口page.html】

將如下代碼加入主窗口<head>區(qū)：

<!--

function openwin(){

window.open("page.html","","width=200,height=200";)

}

//-->

</script>

加入<body>區(qū)：<ahref="1.htm" οnclick="openwin()">open</a>即可。

【彈出的窗口之定時(shí)關(guān)閉控制】

下面我們?cè)賹?duì)彈出窗口進(jìn)行一些控制，效果就更好了。如果我們?cè)賹⒁恍《未a加入彈出的頁面（注意是加入到page.html的HTML中，可不是主頁面中，否則…），讓它在10秒鐘后自動(dòng)關(guān)閉是不是更酷了？

首先，將如下代碼加入page.html文件的<head>區(qū)：

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

</script>

然后，再用<body οnlοad="closeit()">這一句話代替page.html中原有的<BODY>這一句就可以了。（這一句話千

萬不要忘記寫啊！這一句的作用是調(diào)用關(guān)閉窗口的代碼，10秒鐘后就自行關(guān)閉該窗口。）

【在彈出窗口中加上一個(gè)關(guān)閉按鈕】

<form>

</form>

呵呵，現(xiàn)在更加完美了！

【內(nèi)包含的彈出窗口——一個(gè)頁面兩個(gè)窗口】

上面的例子都包含兩個(gè)窗口，一個(gè)是主窗口，另一個(gè)是彈出的小窗口。

通過下面的例子，你可以在一個(gè)頁面內(nèi)完成上面的效果。

<html>

<head>

function openwin()

{

OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";);

//寫成一行

OpenWindow.document.write("<TITLE>例子</TITLE>";)

OpenWindow.document.write("<BODYBGCOLOR=#FFFFFF>";)

OpenWindow.document.write("<H1>Hello!</h1>";)

OpenWindow.document.write("New windowopened!";)

OpenWindow.document.write("</BODY >";)

OpenWindow.document.write("</HTML>";)

OpenWindow.document.close()

}

</script>

</head>

<body>

</body>

</html>

看看OpenWindow.document.write()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個(gè)標(biāo)簽或少一個(gè)標(biāo)簽都會(huì)出現(xiàn)錯(cuò)誤。記住用OpenWindow.document.close()結(jié)束啊。

【終極應(yīng)用——彈出窗口的Cookie控制】

回想一下，上面的彈出窗口雖然酷，但是有一點(diǎn)小毛病（你沉浸在喜悅之中，一定沒有發(fā)現(xiàn)吧？）比如你將上面的腳本放在一個(gè)需要頻繁經(jīng)過的頁面里（例如首頁），那么每次刷新這個(gè)頁面，窗口都會(huì)彈出一次，是不是非常煩人？有解決的辦法嗎？Yes!Followme。我們使用Cookie來控制一下就可以了。

首先，將如下代碼加入主頁面HTML的<HEAD>區(qū)：

function openwin(){

window.open("page.html","","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){

offset += search.length

end = documents.cookie.indexOf (";",offset);

if (end ==-1)

end = documents.cookie.length;

returnvalue=unescape(documents.cookie.substring(offset,end))

}

return returnvalue;

}

function loadpopup(){

if (get_cookie(’popped’)==";){

openwin()

documents.cookie="popped=yes"

}

</script>

然后，用<body οnlοad="loadpopup()">（注意不是openwin而是loadpop啊）替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個(gè)頁面或重新進(jìn)入該頁面，窗口再也不會(huì)彈出了。真正的Pop-Only-Once!

寫到這里，彈出窗口的制作和應(yīng)用技巧基本上算是講完了，希望對(duì)正在制作網(wǎng)頁的朋友有所幫助我就非常欣慰了。

需要注意的是，JS腳本中的大小寫最好前后保持一致。

沒有菜單、工具欄、地址欄的彈出窗口：

<!--

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>??

離開一個(gè)頁面時(shí)彈出一個(gè)可定制的窗口

<!-- Begin

function leave() {

window.open(\'離開頁面時(shí)彈出窗口的URL\',\'\',\'toolbar=no,menubar=no,location=no,height=235,width=320\');

}

// End -->

</script>

如下代碼加入HTML的<BODY>區(qū)：<bodyonUnload="leave()">

超級(jí)彈窗代碼(MYIE也照彈)

focusid=setTimeout("focus();window.showModelessDialog(\'http://www.3tian.com\',\'\',\'scroll:1;status:0;help:0;resizable:1;dialogWidth:0px;dialogHeight:0px\')",0000)

</script>

<!--

function clock(){i=i-1

document.title="";#定義標(biāo)題

if(i>0)setTimeout("clock();",1000);

else self.close();}

var i=4#定義多少秒后關(guān)

clock();

//-->

</script>

轉(zhuǎn)載于:https://www.cnblogs.com/liaoshiyong/archive/2013/06/13/3150872.html

總結(jié)

以上是生活随笔為你收集整理的最基本的弹出窗口代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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