|
在設計網站的時候，在網站有重大的變動，或者需要作什么聲明的時候，我們就要用到彈出
窗口，這時只要我們一進入這個頁面，就會彈出一個窗口，其實要制作這樣的彈出窗口真的非常
的容易，只要在該頁面的HTML代碼里加入一段Javascript代碼即可實現了。我們就來看看這最簡
單的彈出窗口：把下面的這一段代碼可以加入HTML文件的<head>和</head>之間或者<body>間</body>就
行的了，越在前面越早執行的喲！
<SCRIPT LANGUAGE="javascript"> //*JAVASCRIPT腳本的開始標簽，千萬要記得啊
<!-- //*使不支持JAVASCRIPT的瀏覽器瀏覽時也不至于出錯
window.open ('pop1.html') //*這就是關鍵，pop1.html就是你彈出窗口的內容
-->
</SCRIPT>
這里只需要注意這樣一點就行的了：window.open ('pop1.html') 用于控制彈出窗口pop1.html，如
果pop1.html不與主窗口文件在同一路徑下，你應該在前面指明路徑，絕對路徑(http://)和相對路
徑(../)都可以的。里面用單引號和雙引號都可以，只是你千萬別混用，一會用單引號，而一會用雙引號。
上面我們實現的是最基本的彈出窗口，我們的起步，我們現在再來看一個稍微復雜點的彈出窗口，你只
要對上面的代碼作小小的改動就行的了！這樣我們就能定制彈出窗口的外觀，尺寸大小，彈出的位置以適應
該頁面的具體情況和文字的多少。
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('pop2.html', 'popwindow', 'height=200, width=320, top=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//*上面的代碼要寫在一行上面''popwindow' 彈出窗口的標題名字；height=200 彈出窗口高度；width=320 彈出窗口寬度；top=0 彈出窗口距離屏幕上方的象素值；left=24 窗口距離屏幕左側的象素值；toolbar=no 彈出窗口是否顯示工具欄，yes為顯示；menubar，scrollbars 控制彈出窗口的菜單欄和滾動欄的顯示。resizable=no 是否允許改變彈出窗口大小，yes為允許；location=no 彈出窗口是否顯示地址欄，yes為允許；status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
-->
</SCRIPT>
但是我們看到，這樣的彈出窗口實在太簡單的了，你基本上不能對他進行什么樣的控制和設置，我們需要的是能滿足我們的需要的彈出窗口（現代人是要求越來越高的了），那我們就用下面這個腳本來實現，你不但可以定制窗口大小，你還可以根據自己的需要改成你自己的說明的，這樣的歡迎窗口一定讓你的主頁更酷。
將如下代碼加入HTML代碼的<HEAD>和</HEAD>之間：
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');/*width和height是窗口的大小，你可以根據自己的需要進行調整，而resizable是控制窗口大小是否根據文字多少變化，值為0就固定了，為1可以變化，scrollbars是控制滾動條的）
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = '說明窗口內容文件.html';/*popup.location.href = '用于說明窗口內容.htm',用于設置窗口中出現的內容的文件名。
}
// -->
</script>
有時為了需要我們可以同時彈出兩個窗口，這實現難嗎？其實也不難，如果你理解了上面的，那簡直就易如反掌了，來看看吧，你只要對上面的代碼稍微改動一下就可以的了：
<script LANGUAGE="JavaScript">
<!--
window.open ("pop1.html", "popwindow1", "height=100, width=120, top=0, left=24,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
window.open ("pop2.html", "popwindow2", "height=100, width=200, top=100, left=144,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//-->
</script>
在這里，我們為了避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋就可以的了。
有了上面這些， 我想你要做出很酷很好的彈出窗口已經很容易的了，但是我們發現在你訪問一個站點的時候， 如果經常出現彈出窗口（每刷新一次就出現），我們就會覺得很煩的，這里我們看看對彈出窗口的一些優化處理：
第一招，我們給彈出窗口加個“關閉窗口“按紐
只要加上這段代碼就行的了：
<FORM>
<INPUT TYPE='BUTTON' VALUE='關閉' onClick='window.close()'>
</FORM>
第二招：讓彈出窗口自己定時關閉
首先，將如下代碼加入pop1.html文件的<head>和</head>之間：
<script language="JavaScript">
<!--
function closeit() {
setTimeout("self.close()",100000) //單位是毫秒，這里是100秒
</script>
然后，再用<body onload="closeit()"> 這一句話代替pop1.html中原有的<BODY>這一句就可以了。這樣100秒鐘后彈出窗口就會自行關閉
第三招：控制你的彈出窗口只彈出一次（如果每進一次，刷新一次就彈出你不覺得很煩和麻煩嗎？）有什么好的辦法嗎？
那是當然的啊，我們現在只要使用cookie來控制就能實現這樣的要求了。
首先，你需把將如下代碼加入到頁面HTML的<HEAD>和</HEAD>之間：
<script>
function openwin(){
window.open("pop1.html","","width=120,height=240")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){ //*控制彈出窗口的函數喲，你要使用他的啊
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
//-->
</script>
然后，用<body onload="loadpopup()">替換頁面中原來的<BODY>這一句就行的了。這樣你的彈出窗口就只彈出一次了，既使大家了解了你的信息，也不會覺得煩的。最后祝大家做出你滿意的效果來，到時別忘記了叫我來看看�。�
|
