常泡在網(wǎng)上的朋友對(duì)“彈出窗口”一定不會(huì)陌生，像新浪、163等網(wǎng)站，一進(jìn)入首頁(yè)立刻就會(huì)彈出一個(gè)窗口，里面通常是一些告示信息，或者FLASH廣告等等。其實(shí)這樣的效果很容易實(shí)現(xiàn)，大家隨我一起動(dòng)手吧！

不加修飾的彈出窗口

將下面這段代碼插入你的頁(yè)面中，在頁(yè)面加載時(shí)就會(huì)自動(dòng)彈出一個(gè)窗口，并打開(kāi)Google搜索引擎，是不是很簡(jiǎn)單啊！

將代碼放置在〈!—XXX --〉中間是為了兼容較低版本瀏覽器的需要，在低版本的瀏覽器中標(biāo)簽內(nèi)的內(nèi)容將被視作注視。

打開(kāi)的頁(yè)面使用絕對(duì)路徑()或相對(duì)路徑(../page.htm)都可以。

示例代碼1：

〈SCRIPT LANGUAGE="JavaScript"〉
〈!--
window.open('http://m.neng168.cn');
//--〉
〈/SCRIPT〉
修飾彈出窗口

使用下面這段代碼，我們可以對(duì)彈出窗口做更多的控制，包括窗口大小、窗口位置、是否帶工具欄、是否可以改變大小等等。

示例代碼2：

〈script language="JavaScript1.2" type="text/JavaScript1.2"〉
var popUpWin=0;
function popUpWindow()
{
//判斷該窗口(popUpWin)是否已經(jīng)存在，如果已經(jīng)存在，則先關(guān)閉窗口，然后再打開(kāi)新窗口
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}

//根據(jù)參數(shù)定位彈出窗口的展示位置

popUpWin = window.open(‘index.htm’, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbar=no,resizable=no,copyhistory=yes,width=100,height=100,left=100,top=100,screenX=100,screenY=100’);
}
〈/script〉

彈出窗口參數(shù)一覽

彈出窗口的命令格式：“window.open(‘URLStr’, ‘WindowName’, ‘Property’);”，其中：

1.window.open命令用于在網(wǎng)頁(yè)上彈出一個(gè)新窗口。

2.URLStr：彈出窗口所顯示的頁(yè)面

3.WindowName：彈出窗口的名稱，可以任意指定，也可以用’’來(lái)代替

4.Property：用于控制彈出窗口顯示的屬性，具體可控制的參數(shù)有：

5.Toolbar：是否顯示瀏覽器工具欄，yes為顯示，no為不顯示

6.Location：是否顯示游覽器地址欄，yes為顯示，no為不顯示

7.Directories：是否顯示目錄按鈕，yes為顯示，no為不顯示

8.Status：是否顯示狀態(tài)欄，yes為顯示，no為不顯示

9.Menubar：是否顯示菜單條，yes為顯示，no為不顯示

10.Scrollbar：是否激活水平和垂直流動(dòng)條，yes為顯示，no為不顯示

11.Resizable：是否可以改變窗口大小，yes為顯示，no為不顯示

12.Width：指定窗口的寬度，以像素為單位

13.Height：指定窗口的高度，以像素為單位

14.Left：指定窗口距屏幕左端的距離，以像素為單位

15.Top：指定窗口距屏幕頂端的距離，以像素為單位

16.screenX：等同于Left屬性

17.screenY：等同于Top屬性

特效窗口示例

了解了窗口屬性的定義，我們一起來(lái)看一些特殊應(yīng)用，原來(lái)還真有些學(xué)問(wèn)在里面。

通過(guò)函數(shù)調(diào)用控制彈出窗口
 
如“示例代碼2”所定義的彈出窗口，在沒(méi)有調(diào)用popUpWindow方法之前，該窗口是不會(huì)自動(dòng)彈出的，下面我們來(lái)看幾種常用的調(diào)用方法：

頁(yè)面加載時(shí)自動(dòng)彈出窗口

〈body onLoad=”javascript:popUpWindow();”〉

頁(yè)面關(guān)閉時(shí)自動(dòng)彈出窗口

〈body onUnLoad=”javascript:popUpWindow();”〉

通過(guò)鏈接或者按鈕觸發(fā)彈出窗口

〈a href=”#” onClick=” javascript:popUpWindow();”〉

〈input type=”button” name=”彈出窗口” onClick=” javascript:popUpWindow();”〉

彈出窗口定時(shí)關(guān)閉

在彈出的窗口中加入下面一小段代碼，彈出的窗口就會(huì)在20秒后自動(dòng)關(guān)閉。(這段代碼要加在彈出窗口中，而不是主頁(yè)上)

〈script language="javascript"〉
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
〈/script〉

將這段代碼加入〈head〉標(biāo)簽內(nèi)，然后再修改〈body〉標(biāo)簽為〈body onLoad=”closeit()”〉就可以了。

為彈出窗口加上一個(gè)關(guān)閉按鈕

在彈出的窗口中加入下面代碼，頁(yè)面上會(huì)多出一個(gè)按鈕，單擊這個(gè)按鈕，彈出窗口會(huì)自動(dòng)關(guān)閉，而不會(huì)有任何提示。

〈INPUT TYPE='BUTTON' VALUE='關(guān)閉' onClick='window.close()'〉

小結(jié)

了解的彈出窗口的屬性，發(fā)揮你的想象，就可以創(chuàng)造出更酷效果的彈出窗口了。