JavaScript 執行個體–建立彈出式視窗

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.

<script language="JavaScript">

  function CreateWindow()

  {

   msgWindow=window.open("pop_win.html","displayWindow","toolbar=no,width=350,height=400,directories=no,status=no,scrollbars=yes,resize=no,menubar=no")

  }

  </script>

2.

<script language="JavaScript">

  function CreateWindow()

  {

   window.open("pop_win.html","displayWindow","toolbar=no,width=350,height=400,directories=no,status=no,scrollbars=yes,resize=no,menubar=no")

  }

  </script>

<asp:Button id="Button1" Runat="server" Text="Button"></asp:Button>

在page_load事件中

this.Button1.Attributes["onclick"] = "javascript:CreateWindow();"

或者

this.Button1.Attributes.Add("onclick", "javascript:CreateWindow();")

3.

this.Response.Write("<script language='javascript'>window.open('"+this.strUrl+"','popuppage','width="+this.intWidth +",height="+this.intHeight +",top="+this.intTop +",left="+this.intLeft +">,scrollbars,resizable')</script>");

--------------------------------------------------------------------------------------------------------------------

轉載:http://www.ovo.com.cn/info/4360.htm

經常上網的朋友可能到過這樣一些網站，一進入首頁立刻會彈出一個視窗，或者按一個連結或按鈕彈出，通常在這個視窗裡會顯示一些注意事項、著作權資訊、警告、歡迎光顧之類的話或者作者想要特別提示的資訊。其實製作這樣的頁面非常容易，只要往該頁面的HTML裡加入幾段javascript代碼即可實現。下面我就帶你剖析它的奧秘。

【最基本的快顯視窗代碼】

其實代碼非常簡單：

<SCRIPT LANGUAGE="javascript">



</SCRIPT>

因為這是一段javascript代碼，所以它們應該放在<SCRIPT LANGUAGE ="javascript">標籤和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中如果不支援javascript，不會將標籤中的代碼作為文本顯示出來。

Window.open ('page.html')用於控制彈出新的視窗page.html，如果page.html不與主視窗在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。

用單引號和雙引號都可以，只是不要混用。

這一段代碼可以加入HTML的任意位置，加入到<head>和</head>之間也可以，位置越靠前執行越早，尤其是頁面代碼較長時，又想使頁面早點彈出就盡量往前放。

【經過設定後的快顯視窗】

下面再說一說快顯視窗外觀的設定。只要再往上面的代碼中加一點東西就可以了。

我們來定製這個快顯視窗的外觀、尺寸大小、彈出位置以適應該頁面的具體情況。

<SCRIPT LANGUAGE="javascript:>

<!--

window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,

toolbar=no,menubar=no,scrollbars=no,resizable=no,

location=no,status=no')

//寫成一行

-->

</SCRIPT>

參數解釋：

<SCRIPT LANGUAGE="javascript"> js指令碼開始；

window.open 彈出新視窗的命令；

page.html 彈出新視窗的檔案名稱；

newwindow 快顯視窗的名字（不是檔案名稱），可用空 ″代替；

height=100 視窗高度；

top=0 視窗距離螢幕上方的像素值；

left=0 視窗距離螢幕左側的像素值；

toolbar=no 是否顯示工具列，yes為顯示；

menubar,scrollbars 表示功能表列和滾動欄；

resizable=no 是否允許改變視窗大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態列內的資訊（通常是檔案已經開啟），yes為允許；

</SCRIPT> js指令碼結束。

【用函數控制快顯視窗】

下面是一個完整的代碼。

<html>

<head>

<script LANGUAGE="javascript">



</script>

</head>

<body onload="openwin()">

...任意的頁面內容...

</body>

</html>

這裡定義了一個函數openwin(),函數內容就是開啟一個視窗。在調用它之前沒有任何用途。怎麼調用呢？

方法一：<body onload="openwen()"> 瀏覽器讀頁面時快顯視窗；

方法二：<body onunload="openwen()"> 瀏覽器離開頁面時快顯視窗；

方法三：用一個串連調用：<a href="#" onclick="openwin()">開啟一個視窗</a>

注意：使用的"#"是虛串連。

方法四：用一個按鈕調用：<input type="button" onclick="openwin()" value="開啟視窗">

【主視窗開啟檔案1.htm，同時彈出小視窗page.html】

將如下代碼加入主視窗<head>區：

<script language="javascript">



</script>

加入<body>區：<a href="1.htm" onclick="openwin()">open</a>即可。

【彈出的視窗之定時關閉控制】

下面我們再對快顯視窗進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面（注意是加入到page.html的HTML中，可不是首頁面中，否則…），讓它在10秒鐘後自動關閉是不是更酷了？

首先，將如下代碼加入page.html檔案的<head>區：

<script language="javascript">

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

</script>

然後，再用<body onload="closeit()">這一句話代替page.html中原有的<BODY>這一句就可以了。（這一句話千萬不要忘記寫啊！這一句的作用是調用關閉視窗的代碼，10秒鐘後就自行關閉該視窗。）

【在快顯視窗中加上一個關閉按鈕】

<form>

<INPUT TYPE='BUTTON' value='關閉' onClick='window.close()'>

</form>

呵呵，現在更加完美了！

【內包含的快顯視窗——一個頁面兩個視窗】

上面的例子都包含兩個視窗，一個是主視窗，另一個是彈出的小視窗。

通過下面的例子，你可以在一個頁面內完成上面的效果。

<html>

<head>

<SCRIPT LANGUAGE="javascript">

function openwin()

{

OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";);

//寫成一行

OpenWindow.document.write("<TITLE>例子</TITLE>"

OpenWindow.document.write("<BODY BGCOLOR=#FFFFFF>"

OpenWindow.document.write("<H1>Hello!</h1>"

OpenWindow.document.write("New window opened!"

OpenWindow.document.write("</BODY >"

OpenWindow.document.write("</HTML>"

OpenWindow.document.close()

}

</script>

</head>

<body>

<a href="#" onclick="openwin()">開啟一個視窗</a>

<input type="button" onclick="openwin()" value="開啟視窗">

</body>

</html>

看看OpenWindow.document.write()裡面的代碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤都會出現錯誤。記住用OpenWindow.document.close()結束啊。

【終極應用——快顯視窗的Cookie控制】

回想一下，上面的快顯視窗雖然酷，但是有一點小毛病（你沉浸在喜悅之中，一定沒有發現吧？）比如你將上面的指令碼放在一個需要頻繁經過的頁面裡（例如首頁），那麼每次重新整理這個頁面，視窗都會彈出一次，是不是非常煩人？有解決的辦法嗎？Yes!Follow me。我們使用Cookie來控制一下就可以了。

首先，將如下代碼加入首頁面HTML的<HEAD>區：

<script>

function openwin(){

window.open("page.html","","width=200,height=200"

}

function get_cookie(Name){

var search = Name+ "="

var returnvalue ="";

if (documents.cookie.length >0){

offset = documents.cookie.indexOf(search)

if (offset!=-1){

offset += search.length

end = documents.cookie.indexOf (";",offset);

if (end ==-1)

end = documents.cookie.length;

returnvalue =unescape(documents.cookie.substring(offset,end))

}

}

return returnvalue;

}

function loadpopup(){

if (get_cookie('popped')==";){

openwin()

documents.cookie="popped=yes"

}

}

</script>

然後，用<body onload="loadpopup()">（注意不是openwin 而是loadpop啊）替換首頁面中原有的<BODY>這一句即可。你可以試著重新整理一下這個頁面或重新進入該頁面，視窗再也不會彈出了。真正的Pop-Only-Once!

寫到這裡，快顯視窗的製作和應用技巧基本上算是講完了，希望對正在製作網頁的朋友有所協助我就非常欣慰了。

需要注意的是，JS指令碼中的大小寫最好前後保持一致。

沒有菜單、工具列、地址欄的快顯視窗：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More