隨心所欲的定制“彈出窗口”

悟靜 2011-06-20

展開全文

常泡在網上的朋友對“彈出窗口”一定不會陌生，像新浪、163等網站，一進入首頁立刻就會彈出一個窗口，里面通常是一些告示信息，或者FLASH廣告等等。其實這樣的效果很容易實現，大家隨我一起動手吧！

不加修飾的彈出窗口
將下面這段代碼插入你的頁面中，在頁面加載時就會自動彈出一個窗口，并打開Google搜索引擎，是不是很簡單?。?br>
將代碼放置在<!?XXX -->中間是為了兼容較低版本瀏覽器的需要，在低版本的瀏覽器中標簽內的內容將被視作注視。

打開的頁面使用絕對路徑（http://）或相對路徑（../page.htm）都可以。
示例代碼1：
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

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

示例代碼2：
[code]<script language="JavaScript1.2" type="text/JavaScript1.2">
var popUpWin=0;
function popUpWindow()
{
//判斷該窗口（popUpWin）是否已經存在，如果已經存在，則先關閉窗口，然后再打開新窗口
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命令用于在網頁上彈出一個新窗口。
2.URLStr：彈出窗口所顯示的頁面
3.WindowName：彈出窗口的名稱，可以任意指定，也可以用’’來代替
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：是否激活水平和垂直流動條，yes為顯示，no為不顯示
11.Resizable：是否可以改變窗口大小，yes為顯示，no為不顯示
12.Width：指定窗口的寬度，以像素為單位
13.Height：指定窗口的高度，以像素為單位
14.Left：指定窗口距屏幕左端的距離，以像素為單位
15.Top：指定窗口距屏幕頂端的距離，以像素為單位
16.screenX：等同于Left屬性
17.screenY：等同于Top屬性

特效窗口示例
了解了窗口屬性的定義，我們一起來看一些特殊應用，原來還真有些學問在里面。

通過函數調用控制彈出窗口
如“示例代碼2”所定義的彈出窗口，在沒有調用popUpWindow方法之前，該窗口是不會自動彈出的，下面我們來看幾種常用的調用方法：

頁面加載時自動彈出窗口
<body onLoad=”javascript:popUpWindow();”>

頁面關閉時自動彈出窗口
<body onUnLoad=”javascript:popUpWindow();”>

通過鏈接或者按鈕觸發(fā)彈出窗口
<a href=”#” onClick=” javascript:popUpWindow();”>
<input type=”button” name=”彈出窗口” onClick=” javascript:popUpWindow();”>

彈出窗口定時關閉
在彈出的窗口中加入下面一小段代碼，彈出的窗口就會在20秒后自動關閉。（這段代碼要加在彈出窗口中，而不是主頁上）
<script language="javascript">
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
</script>

將這段代碼加入<head>標簽內，然后再修改<body>標簽為<body onLoad=”closeit()”>就可以了。

為彈出窗口加上一個關閉按鈕
在彈出的窗口中加入下面代碼，頁面上會多出一個按鈕，單擊這個按鈕，彈出窗口會自動關閉，而不會有任何提示。
<INPUT TYPE='BUTTON' VALUE='關閉' onClick='window.close()'>

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