首頁 > 其他

js彈出對話方塊(訊息框、警告框)

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

 

警告(alert)

在訪問網站的時候，你遇到過這樣的情況嗎？“咚”的一聲，一個小視窗出現在你面前，上面寫著一段警示性的文字，或是其它的提示資訊。如果你不點擊確定，你就不能對網頁做任何的操作。沒錯，這個“咚”的小視窗就是alert乾的。

下面的代碼是一段使用alert的執行個體。

 代碼如下 複製代碼
<script type="text/JavaScript">
     alert("我是菜鳥我怕誰");
</script>

我的個人觀點是盡量少使用alert，它很不友好。甚至可能讓一些方可認為你的網站很危險。

看一個使用alert的執行個體

確認(confirm)

確認框用於讓使用者選擇某一個問題是否符合實際情況。

“說！是還是不是？快回答！”

如果你想表達這樣的意思，那麼confirm再合適不過了。來看下面的代碼：我們用confirm("你是菜鳥嗎？")向訪客提問，變數r則儲存了訪客的回應，它只可能有兩種取值：true或false。沒錯，它是一個布爾值。confirm後面的語句則是我們對訪客回答做出的不同回應。

 代碼如下 複製代碼
<script type="text/JavaScript">
     var r=confirm("你是菜鳥嗎");
     if (r==true)
     {
     document.write("彼此彼此");
     }
     else
     {
     document.write("佩服佩服");
     }</script>

看一個使用confirm的執行個體

提問(prompt)


prompt和confirm類似，不過它允許訪客隨意輸入回答。我們來修改一下之前switch的例子，我們根據分數來做出不同的評價，不過那段程式並不完整，它根本就沒問我們分數，而是假設我得了65分。這太不公平了。現在我麼就可以用prompt來向訪客提問，用score儲存使用者輸入的回答，其餘的事情就都由後面的switch來完成了。

 代碼如下 複製代碼

<script type="text/JavaScript">
 function judge() {
 var score;//分數
 var degree;//分數等級
 score = prompt("你的分數是多少？")
 if (score > 100){
 degree = '耍我？100分滿！';
 }
 else{
 switch (parseInt(score / 10)) {
 case 0:
 case 1:
 case 2:
 case 3:
 case 4:
 case 5:
 degree = "恭喜你，又掛了！";
 break;
 case 6:
 degree = "勉強及格";
 break;
 case 7:
 degree = "湊合，湊合"
 break;
 case 8:
 degree = "8錯，8錯";
 break;
 case 9:
 case 10:
 degree = "高手高手，佩服佩服";
 }//end of switch
 }//end of else
 alert(degree);
 }
 </script>


看一個完帶的執行個體

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>三種彈出對話方塊的用法執行個體</title>

<script language="javascript">

function ale()

{

  //這個基本沒有什麼說的，就是彈出一個提醒的對話方塊

    alert("我敢保證，你現在用的是示範一");

}

function firm()

{

  //利用對話方塊返回的值 （true 或者 false）

    if(confirm("你確信要轉去風亦飛的部落格？"))

    {

      //如果是true ，那麼就把頁面轉向thcjp.cnblogs.com

        location.href="http://blog.111cn.net/fengyifei11228/";

     }

    else

    {

     //否則說明下了，赫赫

      alert("你按了取消，那就是返回false");

    }

}

function prom()

{

    var name=prompt("請輸入您的名字","");//將輸入的內容賦給變數 name ，

    //這裡需要注意的是，prompt有兩個參數，前面是提示的話，後面是當對話方塊出來後，在對話方塊裡的預設值

    if(name)//如果返回的有內容

    {

         alert("歡迎您："+ name)

     }

}

</script>

</head>

 

<body>

<p>對話方塊有三種</p>

<p>1：只是提醒，不能對指令碼產生任何改變；</p>

<p>2：一般用於確認，返回 true 或者 false ，所以可以輕鬆用於 ifelse判斷 </p>

<p>3： 一個帶輸入的對話方塊，可以返回使用者填入的字串，常見於某些留言本或者論壇輸入內容那裡的 插入UBB格式圖片 </p>

<p>下面我們分別示範：</p>

<p>示範一：提醒 對話方塊</p>

<p>

  <input type="submit" name="Submit" value="提交" onclick="ale()" />

</p>

<p>示範二 ：確認對話方塊 </p>

<p>

  <input type="submit" name="Submit2" value="提交" onclick="firm()" />

</p>

<p>示範三 ：要求使用者輸入，然後給個結果</p>

<p>

  <input type="submit" name="Submit3" value="提交" onclick="prom()" />

</p>

</body>

</html>

最後就是window.open()快顯視窗對話方塊了

1、最基本的js彈出對話方塊視窗代碼】

這是最基本的js彈出對話方塊，其實代碼就幾句非常簡單：

 

 代碼如下 複製代碼

<script LANGUAGE="javascript">
<!--
window.open ("page.html")
-->
</script>


因為這是一段javascripts代碼，所以它們應該放在<script LANGUAGE="javascript">標籤和</script>之間。<!-- 和-->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標籤中的代碼作為文本顯示出來。要養成這個好習慣啊。

window.open ("page.html") 用於控制彈出新的視窗page.html，如果page.html不與主視窗在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。
這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長的頁面，這種js彈出對話方塊想早點彈出就盡量往前放。


【2、增加屬性設定的js彈出對話方塊代碼】

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

 

 

 代碼如下 複製代碼
<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 視窗高度；
width=400 視窗寬度；
top=0 視窗距離螢幕上方的象素值；
left=0 視窗距離螢幕左側的象素值；
toolbar=no 是否顯示工具列，yes為顯示；
menubar，scrollbars 表示功能表列和滾動欄。
resizable=no 是否允許改變視窗大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態列內的資訊（通常是檔案已經開啟），yes為允許；
</script> js指令碼結束

 

【3、用函數控制js彈出對話方塊視窗】

下面是一個完整js彈出對話方塊的代碼。

 

 

 代碼如下 複製代碼

<html>
<head>
<script LANGUAGE="javascript">
<!--
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 onload="openwin()">
...任意的頁面內容...
</body>
</html>

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

怎麼調用呢？

方法一：瀏覽器讀頁面時快顯視窗；

 代碼如下 複製代碼

 

<body onload="openwin()">

方法二：瀏覽器離開頁面時快顯視窗；

 

 代碼如下 複製代碼

<body onunload="openwin()">

方法三：用一個串連調用：

 

 代碼如下 複製代碼

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


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

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

 

 代碼如下 複製代碼

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


【4、同時彈出2個視窗的js彈出對話方塊】

對原始碼稍微改動一下：

 

 

 代碼如下 複製代碼

<script LANGUAGE="javascript">
<!--
function openwin()
{window.open ("page.html", "newwindow", "height=100, width=100,top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")
//寫成一行
window.open ("page2.html","newwindow2", "height=100, width=100, top=100, left=100,toolbar=no,menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//寫成一行
}
//-->
</script>


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

注意：2個js彈出對話方塊視窗的name(newwindows和newwindow2)不要相同，或者乾脆全部為空白。

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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