首頁 >web前端 >js教程 >javascript怎麼彈出對話框

javascript怎麼彈出對話框

藏色散人原創: 2021-05-11 11:07:168564瀏覽

javascript彈出對話框的實作方法：1、透過alert()方法設定對話框；2、透過confirm()方法設定對話框；3、透過prompt()方法設定提示框。

javascript怎麼彈出對話框

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript中的三個彈出對話框

學習過js的小夥伴會發現，我們在一些實例中用到了alert()方法、prompt()方法、prompt()方法，他們都在螢幕上彈出一個對話框，並且在上面顯示括號內的內容，使用這種方法使得頁面的互動性更精彩，實際上我們經常會在進行網頁瀏覽時簡單這種類型的對話框，當使用者與應用程式進行雙向交流時，經常要使用對話框。 avascript的三種對話方塊是透過呼叫window物件的三個方法alert()，confirm()和prompt()來取得，可以利用這些對話方塊來完成js的輸入與輸出，實作與使用者能互動的js代碼。今天小編就來簡單介紹一下js中的三種彈出對話框，小編先單獨對這幾個方法進行詳細講解，接著，將這幾個方法進行對比，好了，開始我們的js之旅吧`(*∩_∩*)′......
第一種：alert()方法
alert()方法是三種對話框中最容易使用的一種，她可以用來簡單而明了地將alert()括號內的文字訊息顯示在對話框中，我們將它稱為警示對話框，要顯示的訊息放置在括號內，該對話方塊上包含一個「確認」按鈕，使用者閱讀完所顯示的資訊後，只需按一下該按鈕即可關閉對話方塊。下面來看一個使用alert()方法的例子，程式碼如下：##

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
</script>
</head>
</html>

執行上面的小例子，並在頁面上跳出對話框框並顯示一句話“上聯：山石岩下古木枯”，如下圖：

## 接著，點擊“確認”按鈕後再顯示第二個對話框並顯示“白水泉邊少女妙！”，效果如下；

在頁面上彈出對話方塊並顯示一句話“上聯：山石岩下古木枯”，點選「確認」按鈕後再顯示第2個對話框並顯示「白水泉邊少女妙！」我們來分析這個小例子：
a、在######### b、在每個alert()括號內分別加入了一段文字訊息，運行出現如下圖所示的頁面，使用滑鼠點選頁面上的「確定」按鈕後，出現第二個頁面，再點選「確定」按鈕後就關閉頁面上的對話方塊。注意：兩個對話方塊是分別顯示的，而不是一個覆蓋另一個，這是因為js實在執行完第一個alert()並等到使用者點擊「確認」按鈕之後才去執行第二個alert()的。 alert()是js的window物件的一個方法，呼叫時可以寫成window.alert()，也可以寫成alert()，功能都是產生一個帶有確認按鈕的對話框，上面顯示括號內的信息，## ############# ##########第二種：confirm()方法############

confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。下面来看一个关于confirm()的小例子,代码如下所示：

<html>
<head>
<title>编写html页面</title>
<script language="javascript">  //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>

显示效果如下：

分析一下这个小例子：
a、在