本文實例總結了js彈出對話框方式。分享給大家供大家參考，具體如下：
一般常用的是 alert prompt confirm三種對話框
示例1：
<html>
<head>
<title>Example 簡單對話框</title>
</head>
<body>
<script type="text/JavaScript">
<!--
alert("Good Morning!");
//alert只接受一個參數，這個參數是一個字符串，alert所做的全部事情是將這個字符串
//原封不動地以一個提示框返回給用戶，我們在前面已經多次見到了這種用法
alert("Hello, "+ prompt("What's your name?")+ "!");
//prompt是一個詢問框，它產生一個詢問輸入窗口，同時等待用戶輸入的結果
//以繼續執行下面的程序，當用戶輸入完成，點擊確認後，它會將輸入的字符串返回
//如果用戶點了取消按鈕，那麼它會返回null
if(confirm("Are you ok?"))
//confirm是一個確認框，它產生一個Yes|No的確認提示框，如果回答了Yes，它返回true
//如果回答了No，它返回false
alert("Greate! ");
else
alert("Oh, what's wrong?");
-->
</script>
</body>
也可以自己定義新窗口模擬對話框
示例2：
<html>
<head>
<title>Example模擬對話框</title>
</head>
<body>
<button onclick="opennew()">打開</button>
<script type="text/JavaScript">
<!--
function opennew(){
//doucment.createElement可以用來構造新的DOM對象
var w=document.createElement("div");
//下面一組style屬性控制了模擬窗口的樣式
//DOM提供的style屬性可以很方便地讓JavaScript控制元素的展現方式
w.style.top=50;
w.style.left=50;
w.style.height=100;
w.style.width=300;
w.style.position="absolute";
w.style.background="#00ffff";
w.style.paddingTop = 10;
//通過appendChild()方法將創建的div元素對象添加到body的內容中去
w.innerHTML+=("<center>I D :<input><br>密碼:<input><br></center>");
document.body.appendChild(w);
}
-->
</script>
</body>
</html>
另外，js基於confirm的確認 取消對話框也非常常見，總結如下：
一種：
復制代碼 代碼如下:<a href="javascript:if(confirm('確實要刪除該內容嗎?'))location='http://www.google.com'">彈出窗口</a>
二種：
<script language="JavaScript">
function delete_confirm(e)
{
if (event.srcElement.outerText == "刪除")
{
event.returnValue = confirm("刪除是不可恢復的，你確認要刪除嗎？");
}
}
document.onclick = delete_confirm;
</script>
<a href="Delete.aspx" onClick="delete_confirm">刪除</a>
三種：
if(window.confirm('你確定要取消交易嗎？')){
//alert("確定");
return true;
}else{
//alert("取消");
return false;
}
四種：
<script language="JavaScript">
function delete_confirm() <!--調用方法-->
{
event.returnValue = confirm("刪除是不可恢復的，你確認要刪除嗎？");
}
</script>
附：js 彈出對話框3種方式完整實例：
<!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://www.jb51.net/";
}
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>
希望本文所述對大家JavaScript程序設計有所幫助。