常泡在網(wǎng)上的朋友對“彈出窗口”一定不會(huì )陌生,像新浪、163等網(wǎng)站,一進(jìn)入首頁(yè)立刻就會(huì )彈出一個(gè)窗口,里面通常是一些告示信息,或者FLASH廣告等等。其實(shí)這樣的效果很容易實(shí)現,大家隨我一起動(dòng)手吧!
不加修飾的彈出窗口
將下面這段代碼插入你的頁(yè)面中,在頁(yè)面加載時(shí)就會(huì )自動(dòng)彈出一個(gè)窗口,并打開(kāi)Google搜索引擎,是不是很簡(jiǎn)單??!
將代碼放置在<!?XXX -->中間是為了兼容較低版本瀏覽器的需要,在低版本的瀏覽器中標簽內的內容將被視作注視。
打開(kāi)的頁(yè)面使用絕對路徑(http://)或相對路徑(../page.htm)都可以。
示例代碼1:
<SCRIPT LANGUAGE="JavaScript">
<!--
window.open('http://www.google.com');
//-->
</SCRIPT>
修飾彈出窗口
使用下面這段代碼,我們可以對彈出窗口做更多的控制,包括窗口大小、窗口位置、是否帶工具欄、是否可以改變大小等等。
示例代碼2:
[code]<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();
}
//根據參數定位彈出窗口的展示位置
popUpWin = window.open(‘page.htm’, 'popUpWin', 'toolbar=no,location=no,
directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width=100,height=100,
left=100,top=100,screenX=100,screenY=100’);
}
</script>[/code]
彈出窗口參數一覽
彈出窗口的命令格式:“window.open(‘URLStr’, ‘WindowName’, ‘Property’);”,其中:
1.window.open命令用于在網(wǎng)頁(yè)上彈出一個(gè)新窗口。
2.URLStr:彈出窗口所顯示的頁(yè)面
3.WindowName:彈出窗口的名稱(chēng),可以任意指定,也可以用’’來(lái)代替
4.Property:用于控制彈出窗口顯示的屬性,具體可控制的參數有:
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)看一些特殊應用,原來(lái)還真有些學(xué)問(wèn)在里面。
通過(guò)函數調用控制彈出窗口
如“示例代碼2”所定義的彈出窗口,在沒(méi)有調用popUpWindow方法之前,該窗口是不會(huì )自動(dòng)彈出的,下面我們來(lái)看幾種常用的調用方法:
頁(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>標簽內,然后再修改<body>標簽為<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()'>
小結
了解的彈出窗口的屬性,發(fā)揮你的想象,就可以創(chuàng )造出更酷效果的彈出窗口了。