技術資訊

如何控制彈出窗口的大小、尺寸、位置等的樣式

2011-12-31 13:22:13

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

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

</SCRIPT>

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

2、經過設置后的彈出窗口

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

參數(shù)解釋：
<SCRIPT LANGUAGE="javascript"> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態(tài)欄內的信息（通常是文件已經打開），yes為允許；
</SCRIPT> js腳本結束

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

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

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

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

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

4、同時彈出2個窗口

對源代碼稍微改動一下：

點擊后通過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')">點擊彈出頁面</a>

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

6、修飾彈出窗口

使用下面這段代碼，我們可以對彈出窗口做更多的控制，包括窗口大小、窗口位置、是否帶工具欄、是否可以改變大小等等。
示例代碼2：
〈script language="JavaScript1.2" type="text/JavaScript1.2"〉
var popUpWin=0;
function popUpWindow()
{
//判斷該窗口（popUpWin）是否已經存在，如果已經存在，則先關閉窗口，然后再打開新窗口
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)頁上彈出一個新窗口。
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：是否激活水平和垂直流動條，yes為顯示，no為不顯示
11.Resizable：是否可以改變窗口大小，yes為顯示，no為不顯示
12.Width：指定窗口的寬度，以像素為單位
13.Height：指定窗口的高度，以像素為單位
14.Left：指定窗口距屏幕左端的距離，以像素為單位
15.Top：指定窗口距屏幕頂端的距離，以像素為單位
16.screenX：等同于Left屬性
17.screenY：等同于Top屬性
特效窗口示例
了解了窗口屬性的定義，我們一起來看一些特殊應用，原來還真有些學問在里面。

通過函數(shù)調用控制彈出窗口
如“示例代碼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()'〉

上一篇：dede自定義圖片字段圖片上傳后無法點擊選中的解決辦法

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