js彈出視窗總結6種彈窗方法

注:

//關閉,父視窗彈出對話框,子視窗直接關閉

this.Response.Write("<script language=javascript>window.close();</script>");

//關閉,父視窗和子視窗都不彈出對話框,直接關閉

this.Response.Write("<script>");

this.Response.Write("{top.opener =null;top.close();}");

this.Response.Write("</script>");

//彈出視窗重新整理目前頁面width=200 height=200菜單。菜單欄,工具條,位址欄,狀态欄全沒有

this.Response.Write("<script

language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");

//彈出視窗重新整理目前頁面

this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");

this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");

//彈出提示視窗跳到webform2.aspx頁(在一個IE視窗中)

this.Response.Write(" <script

language=javascript>alert('注冊成功');

window.window.location.href='WebForm2.aspx';</script> ");

//關閉目前子視窗,重新整理父視窗

this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");

this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");

//子視窗重新整理父視窗

this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");

this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");

//彈出提示視窗.确定後彈出子視窗(WebForm2.aspx)

this.Response.Write("<script language='javascript'>alert('發表成功！');window.open('WebForm2.aspx')</script>");

//彈出提示視窗,确定後,重新整理父視窗

this.Response.Write("<script>alert('發表成功！');window.opener.location.href=window.opener.location.href;</script>");

//彈出相同的一頁

Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");

<!--

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

left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n

o, status=no') //這句要寫成一行

-->

</SCRIPT>

　　參數解釋：

　　<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 是否顯示狀态欄内的資訊（通常是檔案已經打開），yes為允許；

　　</SCRIPT> js腳本結束

'newwin':隐藏菜單欄位址欄工具條

width=50:寬度

height=50:高度

scrollbars=yes/no:滾動條

top=50:視窗距離螢幕上方

left=50:視窗距離螢幕左側

例:window.open('detail.aspx?ID="+e.Item.Cells[1].Text+"','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');");

this.Response.Write("<Script>window.open('WebForm2.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');</script>");

例:

linkcolumn1.DataNavigateUrlFormatString="javascript:varwin=window.open('edit_usr.aspx?actid={0}','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');window.close()";

this.Response.Write("<Script>window.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');</script>");

彈出跟你目前的視窗有沒有菜單工具欄沒有關系,你隻要在頁面中寫一個腳本它就彈出了.比如

<a href=# onclick="window.open('xxx.aspx','視窗名稱','參數');">xxxxx</a>

以下列出一些彈出視窗的參數,你可自行設定,參數之間用逗号分隔

可選。字元串--列出對象表并用逗号分開。每一項都有自己的值，他們将被分開（如："fullscreen=yes, toolbar=yes"）。下面是被支援的各種特性。

channelmode = { yes | no | 1 | 0 } 是否在視窗中顯示階梯模式。預設為no。

directories = { yes | no | 1 | 0 } 是否在視窗中顯示各種按鈕。預設為yes。

fullscreen = { yes | no | 1 | 0 }

是否用全屏方式顯示浏覽器。預設為no。使用這一特性時需要非常小心。因為這一屬性可能會隐藏浏覽器的标題欄和菜單，你必須提供一個按鈕或者其他提示來幫

助使用者關閉這一浏覽視窗。ALT+F4可以關閉視窗。一個全屏視窗必須使用階梯(channelmode)模式。

height = number 指定視窗的高度，機關是像素。最小值是100。

left = number 指定視窗距左邊框的距離，機關是像素。值必須大于或者等于0。

location = { yes | no | 1 | 0 } 指定是否在視窗中顯示位址欄。預設為yes。

menubar = { yes | no | 1 | 0 } 指定是否在視窗中顯示菜單欄。預設為yes。

resizable = { yes | no | 1 | 0 } 指定是否在視窗中顯示可供使用者調整大小的句柄。預設為yes。

scrollbars = { yes | no | 1 | 0 } 指定是否在視窗中顯示橫向或者縱向滾動條。預設為yes。

status = { yes | no | 1 | 0 } 指定是否在視窗中顯示狀态欄。預設為yes。

titlebar = { yes | no | 1 | 0 } 指定是否在視窗中顯示标題欄。在非調用HTML Application或者一個對話框的情況下，這一項将被忽略。預設為yes。

toolbar = { yes | no | 1 | 0 } 指定是否在視窗中顯示工具欄，包括如前進、後退、停止等按鈕。預設為yes。

top = number 指定視窗頂部的位置，機關是像素。值必須大于或者等于0。

width = number 指定視窗的寬度，機關是像素。最小值是100。

【1、最基本的彈出視窗代碼】

<!--

　　window.open ('page.html')

　　-->

　　</SCRIPT>

　　因為這是一段javascripts代碼，是以它們應該放在<SCRIPT

LANGUAGE="javascript">标簽和</script>之間。<!-- 和

-->是對一些版本低的浏覽器起作用，在這些老浏覽器中不會将标簽中的代碼作為文本顯示出來。要養成這個好習慣啊。window.open

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

和相對路徑(../)均可。用單引号和雙引号都可以，隻是不要混用。這一段代碼可以加入HTML的任意位置，<head>和<

/head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量

往前放。

【2、經過設定後的彈出視窗】

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

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

　　</SCRIPT>

【3、用函數控制彈出視窗】

　　下面是一個完整的代碼。

　　<html>

　　<head>

　　function openwin() {

　　window.open ("page.html", "newwindow", "height=100, width=400, toolbar

=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

//寫成一行

　　}

　　//-->

　　</script>

　　</head>

　　<body

　　任意的頁面内容...

　　</body>

　　</html>

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

　　方法一：<body 浏覽器讀頁面時彈出視窗；

　　方法二：<body onunload="openwin()"> 浏覽器離開頁面時彈出視窗；

　　方法三：用一個連接配接調用：

　　<a href="#"

　　注意：使用的“#”是虛連接配接。

　　方法四：用一個按鈕調用：

【4、同時彈出2個視窗】

　　對源代碼稍微改動一下：

　　window.open ("page.html", "newwindow", "height=100, width=100, top=0,

left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n

o, status=no")//寫成一行

　　window.open ("page2.html", "newwindow2", "height=100, width=100, top=1

00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca

tion=no, status=no")//寫成一行

　　為避免彈出的2個視窗覆寫，用top和left控制一下彈出的位置不要互相覆寫即可。最後用上面說過的四種方法調用即可。

　　注意：2個視窗的name(newwindows和newwindow2)不要相同，或者幹脆全部為空。

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

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

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

　　加入<body>區：

　　<a href="1.htm"

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

　　下面我們再對彈出的視窗進行一些控制，效果就更好了。如果我們再将一小段代碼加入彈出的頁面(注意是加入page.html的HTML中，不是首頁面中)，讓它10秒後自動關閉是不是更酷了？

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

　　function closeit()

　　{

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

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

轉自 http://tutu.spaces.eepw.com.cn/articles/article/item/70198

js彈出視窗總結6種彈窗方法

繼續閱讀

Js複制内容到剪貼闆

浏覽器js運作解析

layui時間選擇框，選擇時間段

實作電腦功能

js進階學習筆記（b站尚矽谷）-3-對象

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

js 日期格式化以及擷取某天的零點和23:59

Angularjs的$http方法的success和then的差別

jquery,ajax,jsonp例子+springmvc背景

attachEvent 與addEventListener 差別

用JS模拟實作二叉樹(含周遊)

關于 underscore 中模闆引擎的應用示例

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

jquery_126_demo