快捷導(dǎo)航

js彈出對(duì)話框方式小結(jié)

更新時(shí)間：2015年11月17日 09:26:40 作者：八度空間

這篇文章主要介紹了js彈出對(duì)話框方式,結(jié)合大量實(shí)例總結(jié)分析了JavaScript常用的彈出對(duì)話框的實(shí)現(xiàn)技巧與相關(guān)函數(shù)的具體使用方法,需要的朋友可以參考下

本文實(shí)例總結(jié)了js彈出對(duì)話框方式。分享給大家供大家參考，具體如下：

一般常用的是 alert prompt confirm三種對(duì)話框

示例1：

<html>
<head>
<title>Example 簡(jiǎn)單對(duì)話框</title>
</head>
<body>
<script type="text/JavaScript">
<!--
alert("Good Morning!"); 
//alert只接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)字符串，alert所做的全部事情是將這個(gè)字符串
//原封不動(dòng)地以一個(gè)提示框返回給用戶，我們?cè)谇懊嬉呀?jīng)多次見到了這種用法
alert("Hello, "+ prompt("What's your name?")+ "!");
//prompt是一個(gè)詢問框，它產(chǎn)生一個(gè)詢問輸入窗口，同時(shí)等待用戶輸入的結(jié)果
//以繼續(xù)執(zhí)行下面的程序，當(dāng)用戶輸入完成，點(diǎn)擊確認(rèn)后，它會(huì)將輸入的字符串返回
//如果用戶點(diǎn)了取消按鈕，那么它會(huì)返回null
if(confirm("Are you ok?"))
//confirm是一個(gè)確認(rèn)框，它產(chǎn)生一個(gè)Yes|No的確認(rèn)提示框，如果回答了Yes，它返回true
//如果回答了No，它返回false
alert("Greate! ");
else
alert("Oh, what's wrong?");
-->
</script>
</body>

也可以自己定義新窗口模擬對(duì)話框

示例2：

<html>
<head>
<title>Example模擬對(duì)話框</title>
</head>
<body>
<button onclick="opennew()">打開</button>
<script type="text/JavaScript">
<!--
function opennew(){
//doucment.createElement可以用來構(gòu)造新的DOM對(duì)象
var w=document.createElement("div");
//下面一組style屬性控制了模擬窗口的樣式
//DOM提供的style屬性可以很方便地讓JavaScript控制元素的展現(xiàn)方式
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()方法將創(chuàng)建的div元素對(duì)象添加到body的內(nèi)容中去
w.innerHTML+=("<center>I&nbsp;D&nbsp;:<input><br>密碼:<input><br></center>");
document.body.appendChild(w);
}
-->
</script>
</body>
</html>

另外，js基于confirm的確認(rèn) 取消對(duì)話框也非常常見，總結(jié)如下：

一種：

復(fù)制代碼代碼如下:

<a href="javascript:if(confirm('確實(shí)要?jiǎng)h除該內(nèi)容嗎?'))location='http://www.google.com'">彈出窗口</a>

二種：

<script language="JavaScript">
function delete_confirm(e) 
{
  if (event.srcElement.outerText == "刪除") 
  {
    event.returnValue = confirm("刪除是不可恢復(fù)的，你確認(rèn)要?jiǎng)h除嗎？");
  }
}
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() <!--調(diào)用方法-->
{
  event.returnValue = confirm("刪除是不可恢復(fù)的，你確認(rèn)要?jiǎng)h除嗎？");
}
</script>

附：js 彈出對(duì)話框3種方式完整實(shí)例：

<!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>三種彈出對(duì)話框的用法實(shí)例</title>
<script language="javascript">
function ale()
{
  //這個(gè)基本沒有什么說的，就是彈出一個(gè)提醒的對(duì)話框
  alert("我敢保證，你現(xiàn)在用的是演示一");
}
function firm()
{
  //利用對(duì)話框返回的值 （true 或者 false）
  if(confirm("你確信要轉(zhuǎn)去風(fēng)亦飛的博客？"))
  {
    //如果是true ，那么就把頁面轉(zhuǎn)向thcjp.cnblogs.com
    location.href="http://m.fzitv.net/";
   }
  else
  {
   //否則說明下了，赫赫
   alert("你按了取消，那就是返回false");
  }
}
function prom()
{
  var name=prompt("請(qǐng)輸入您的名字","");//將輸入的內(nèi)容賦給變量 name ，
  //這里需要注意的是，prompt有兩個(gè)參數(shù)，前面是提示的話，后面是當(dāng)對(duì)話框出來后，在對(duì)話框里的默認(rèn)值
  if(name)//如果返回的有內(nèi)容
  {
     alert("歡迎您："+ name)
   }
}
</script>
</head>
<body>
<p>對(duì)話框有三種</p>
<p>1：只是提醒，不能對(duì)腳本產(chǎn)生任何改變；</p>
<p>2：一般用于確認(rèn)，返回 true 或者 false ，所以可以輕松用于 ifelse判斷 </p>
<p>3：一個(gè)帶輸入的對(duì)話框，可以返回用戶填入的字符串，常見于某些留言本或者論壇輸入內(nèi)容那里的 插入U(xiǎn)BB格式圖片 </p>
<p>下面我們分別演示：</p>
<p>演示一：提醒 對(duì)話框</p>
<p>
 <input type="submit" name="Submit" value="提交" onclick="ale()" />
</p>
<p>演示二 ：確認(rèn)對(duì)話框 </p>
<p>
 <input type="submit" name="Submit2" value="提交" onclick="firm()" />
</p>
<p>演示三 ：要求用戶輸入，然后給個(gè)結(jié)果</p>
<p>
 <input type="submit" name="Submit3" value="提交" onclick="prom()" />
</p>
</body>
</html>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: