技術(shù)資訊

彈出窗口控制代碼匯總

2011-12-31 12:52:00

在青島網(wǎng)站設(shè)計(jì)中，經(jīng)常會用到一些彈出窗口的效果，包括控制彈出窗口大小和位置的代碼、關(guān)閉頁面時(shí)彈出新窗口代碼、同時(shí)彈出兩個(gè)窗口口的代碼、彈出窗口在新頁面后面的代碼、彈出窗口定時(shí)關(guān)閉的代碼、判斷彈出窗口是否存在如果存在就不彈出的代碼等等，做了一些匯總，可以方便的在青島網(wǎng)站制作中加以應(yīng)用。

1、最基本的彈出窗口代碼
<SCRIPT LANGUAGE="javascript">

</SCRIPT>

因?yàn)檫@是一段javascripts代碼，所以它們應(yīng)該放在<SCRIPT LANGUAGE="javascript">標(biāo)簽和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個(gè)好習(xí)慣啊。window.open ('page.html') 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應(yīng)寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執(zhí)行，尤其是頁面代碼長，又想使頁面早點(diǎn)彈出就盡量往前放。

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

下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。我們來定制這個(gè)彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)該頁面的具體情況。

參數(shù)解釋：
<SCRIPT LANGUAGE="javascript"> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
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é)束

3、用函數(shù)控制彈出窗口

下面是一個(gè)完整的代碼。
<html>
<head>
<script LANGUAGE="javascript">

</script>
</head>
<body onload="openwin()">
任意的頁面內(nèi)容...
</body>
</html>

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

方法一：<body onload="openwin()"> 瀏覽器讀頁面時(shí)彈出窗口；
方法二：<body onunload="openwin()"> 瀏覽器離開頁面時(shí)彈出窗口；
方法三：用一個(gè)連接調(diào)用：
<a href="#" onclick="openwin()">打開一個(gè)窗口</a>
注意：使用的"#"是虛連接。
方法四：用一個(gè)按鈕調(diào)用：
<input type="button" onclick="openwin()" value="打開窗口">

4、同時(shí)彈出2個(gè)窗口

對源代碼稍微改動(dòng)一下：

點(diǎn)擊后通過js彈出窗口
方法1
<a style="cursor:hand" onclick='window.open("http://www.ihaomai.cn","","width=420,height=830")'>彈出頁面</a>

方法2
<a href="#" onclick="window.open('01.htm','go','width=380,height=200,left=200,top=200,screenX=200,screenY=200')">點(diǎn)擊彈出頁面</a>

5、彈出窗口在新頁面的后面

6、修飾彈出窗口

使用下面這段代碼，我們可以對彈出窗口做更多的控制，包括窗口大小、窗口位置、是否帶工具欄、是否可以改變大小等等。
示例代碼2：
〈script language="JavaScript1.2" type="text/JavaScript1.2"〉
var popUpWin=0;
function popUpWindow()
{
//判斷該窗口（popUpWin）是否已經(jīng)存在，如果已經(jīng)存在，則先關(guān)閉窗口，然后再打開新窗口
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
//根據(jù)參數(shù)定位彈出窗口的展示位置
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〉

彈出窗口參數(shù)一覽
彈出窗口的命令格式：“window.open(‘URLStr’, ‘WindowName’, ‘Property’);”，其中：
1.window.open命令用于在網(wǎng)頁上彈出一個(gè)新窗口。
2.URLStr：彈出窗口所顯示的頁面
3.WindowName：彈出窗口的名稱，可以任意指定，也可以用’’來代替
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屬性
特效窗口示例
了解了窗口屬性的定義，我們一起來看一些特殊應(yīng)用，原來還真有些學(xué)問在里面。

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

頁面加載時(shí)自動(dòng)彈出窗口
〈body onLoad=”javascript:popUpWindow();”〉

頁面關(guān)閉時(shí)自動(dòng)彈出窗口
〈body onUnLoad=”javascript:popUpWindow();”〉

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

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

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

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

上一篇：如何讓彈出窗口在網(wǎng)頁后面

下一篇：如何運(yùn)營好一個(gè)企業(yè)網(wǎng)站