Js 三種對話方塊的使用方法
阿新 • • 發佈：2019-01-30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>對話方塊的三種使用方法</title>
<script type="text/javascript">
function show_alert(){
<!-- 1. alert() 函式：彈出訊息對話方塊（對話方塊中有一個OK按鈕）訊息提示框-->
alert("alert：彈出訊息提示框，只有一個OK按鈕");
}
function show_confirm(){
<!-- 2. confirm() 函式：彈出訊息對話方塊（對話方塊中包含一個OK按鈕與Cancel按鈕）訊息確認框 -->
window.confirm("confirm:彈出訊息提示框，有一個OK按鈕和Cancel（取消）按鈕，可以傳入內容");
//因為confirm對話方塊有2種結果：true/false（window.close()方法 火狐不適用，IE可以）
var a = window.confirm("你確定關閉瀏覽器嗎？");
if(a){ //當a為true時，執行下一步
window.close();
}else{ //當a為false時，執行下一步
alert("看我呀！");
}
}
/* 3. prompt() 函式：彈出訊息對話方塊（對話方塊中包含一個OK按鈕、Cancel按鈕與一個文字輸入框）
兩個引數:第一個是文字框的提示資訊; 第二個是輸入框中的預設資訊。使用alert提示prompt框中內容時，點選 確定，顯示輸入的內容；點選取消，顯示null。*/
function show_prompt(){
var b = window.prompt("第一個是文字框的提示資訊","第二個是輸入框中的預設資訊。使用alert提示prompt框中內容時，點選確定，顯示輸入的內容；點選取消，顯示null。");
alert(b);
}
</script>
</head>
<body>
<center>
<button onClick="show_alert()">1. alert對話方塊</button>
<button onClick="show_confirm()">2. confirm對話方塊</button>
<button onClick="show_prompt()">3. prompt對話方塊</button>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>對話方塊的三種使用方法</title>
<script type="text/javascript">
function show_alert(){
<!-- 1. alert() 函式：彈出訊息對話方塊（對話方塊中有一個OK按鈕）訊息提示框-->
alert("alert：彈出訊息提示框，只有一個OK按鈕");
}
function show_confirm(){
<!-- 2. confirm() 函式：彈出訊息對話方塊（對話方塊中包含一個OK按鈕與Cancel按鈕）訊息確認框 -->
window.confirm("confirm:彈出訊息提示框，有一個OK按鈕和Cancel（取消）按鈕，可以傳入內容");
//因為confirm對話方塊有2種結果：true/false（window.close()方法 火狐不適用，IE可以）
var a = window.confirm("你確定關閉瀏覽器嗎？");
if(a){ //當a為true時，執行下一步
window.close();
}else{ //當a為false時，執行下一步
alert("看我呀！");
}
}
/* 3. prompt() 函式：彈出訊息對話方塊（對話方塊中包含一個OK按鈕、Cancel按鈕與一個文字輸入框）
兩個引數:第一個是文字框的提示資訊; 第二個是輸入框中的預設資訊。使用alert提示prompt框中內容時，點選 確定，顯示輸入的內容；點選取消，顯示null。*/
function show_prompt(){
var b = window.prompt("第一個是文字框的提示資訊","第二個是輸入框中的預設資訊。使用alert提示prompt框中內容時，點選確定，顯示輸入的內容；點選取消，顯示null。");
alert(b);
}
</script>
</head>
<body>
<center>
<button onClick="show_alert()">1. alert對話方塊</button>
<button onClick="show_confirm()">2. confirm對話方塊</button>
<button onClick="show_prompt()">3. prompt對話方塊</button>
</center>
</body>
</html>