夏日博客

A-A+

js弹出确认对话框confirm(),alert(),prompt

2016年10月14日 前端设计 暂无评论 阅读 7 views 次

在js中弹确认对话框我们会想到有alert()、confirm()、prompt()三种命令，下面我来给大家分享介绍它们有用法与区别。

window.alert() 使用警告、提示和确定,代码如下:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function message()  
  5. {  
  6. alert("该提示框是通过 onload 事件调用的。")  
  7. }  
  8. </script>  
  9. </head>  
  10.   
  11. <body onload="message()">  
  12.   
  13. </body>  
  14. </html>  

confirm 方法的返回值为 true 或 false,代码如下:

  1. <script language="JavaScript">              
  2. function delete_confirm(e)  
  3. {  
  4.     if (event.srcElement.outerText == "删除")  
  5.     {//xiariboke.net  
  6.         event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");  
  7.     }  
  8. }  
  9. document.onclick = delete_confirm;  
  10. </script>  
  11.   
  12. <a href="Delete.aspx" onClick="delete_confirm">删除</a>  

例2,代码如下:

  1. if(window.confirm('你确定要取消交易吗？')){  
  2.                  //alert("确定");  
  3.                  return true;  
  4.               }else{  
  5.                  //alert("取消");  
  6.                  return false;  
  7.     }  

prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

  1. var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");  

例1,代码如下:

  1. <script language="javascript" type="text/javascript">  
  2. function prom(href)  
  3. {  
  4. var name=prompt("input the name","");  
  5.   
  6.   
  7. if(name=="admin")  
  8. {  
  9. var pwsd=prompt("input the password","");  
  10. if(pwsd=="admin")  
  11. {  
  12. alert("login ok...");  
  13. location.href=href;  
  14. }  
  15. else{alert("error password");}  
  16. }  
  17. else{alert("error name");}  
  18. } //xiariboke.net  
  19. </script>  
  20.   
  21. <html type="button" onClick="prom();" name="prom" value="prom">  

上面的都是用js自己原，下面我们利用js写一个div+js弹出提示框，这种也是现在常用的,代码如下:

  1. /* 
  2.  js弹窗代码:用户体验极佳的Alert提示效果 
  3.  pubdate:2011-05-26 10:15 
  4.  e-mail:xpsem2010@gmail.com 
  5.  source:小拼SEM博客 
  6. */  
  7. //获取指定ID的元素  
  8. function $xp(id) {  
  9.  return document.getElementById(id);  
  10. }  
  11. //通用事件获取接口  
  12. function getEvent()  
  13. {  
  14.  if(CheckBrowser()=='IE')  return window.event;  
  15.  func=getEvent.caller;  
  16.  while(func!=null)  
  17.  {  
  18.   var arg0 = func.arguments[0];  
  19.   if(arg0)  
  20.   {  
  21.    if((arg0.constructor==Event || arg0.constructor ==MouseEvent)  
  22.    || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))  
  23.    {  
  24.     return arg0;  
  25.    }  
  26.   }  
  27.   func=func.caller;  
  28.  }  
  29.  return null;  
  30. }  
  31. //alert  
  32. function NewAlertBox(msg, time){//time为消失时间  
  33.  var msgbg,msgcolor,bordercolor,content,posLeft,posTop;  
  34.  //弹出窗口设置  
  35.  msgbg = "#FFF";   //内容背景  
  36.  msgcolor = "#000";  //内容颜色  
  37.  bordercolor = "#ccc";  //边框颜色  
  38.  //遮罩背景设置  
  39.  content = "这里是表情图片地址（HTML格式）" + msg;  
  40.  var sWidth,sHeight;  
  41.  sWidth = screen.availWidth - 20;//防止溢出  
  42.  if(screen.availHeight > document.body.scrollHeight){  
  43.   sHeight = screen.availHeight; //少于一屏  
  44.  }else{  
  45.   sHeight = document.body.scrollHeight; //多于一屏  
  46.  }  
  47.  //创建遮罩背景  
  48.  var maskObj = document.createElement("div");  
  49.  maskObj.setAttribute('id','maskdiv');  
  50.  maskObj.style.position = "absolute";  
  51.  maskObj.style.top = "0";  
  52.  maskObj.style.left = "0";  
  53.  maskObj.style.background = "#fff";  
  54.  maskObj.style.filter = "Alpha(opacity=40);";  
  55.  maskObj.style.opacity = "0.4";  
  56.  maskObj.style.width = sWidth + "px";  
  57.  maskObj.style.height = sHeight + "px";  
  58.  maskObj.style.zIndex = "10000";  
  59.  document.body.appendChild(maskObj);  
  60.  //创建弹出窗口  
  61.  var msgObj = document.createElement("div")  
  62.  msgObj.setAttribute("id","msgdiv");  
  63.  msgObj.style.position ="absolute";  
  64.  var event = getEvent();//申明event  
  65.  if(CheckBrowser()=='IE')  
  66.  {  
  67.   posLeft = event.clientX + 10;  
  68.   posTop = event.clientY + document.documentElement.scrollTop;  
  69.  }  
  70.  else  
  71.  {  
  72.   posLeft = event.pageX + 10 + "px";//ff下要申明px  
  73.   posTop = event.pageY + 10 + "px";  
  74.  }  
  75.  msgObj.style.top = posTop;  
  76.  msgObj.style.left = posLeft;  
  77.  msgObj.style.fontSize = "12px";  
  78.  msgObj.style.background = msgbg;  
  79.  msgObj.style.border = "1px solid " + bordercolor;  
  80.  msgObj.style.zIndex = "10001";  
  81.  //创建内容  
  82.  var bodyObj = document.createElement("div");  
  83.  bodyObj.setAttribute("id","msgbody");  
  84.  bodyObj.style.padding = "10px";  
  85.  bodyObj.style.lineHeight = "1.5em";  
  86.  //var txt = document.createTextNode(content);  
  87.  //bodyObj.appendChild(txt);  
  88.  bodyObj.innerHTML = content;  
  89.  //生成窗口  
  90.  document.body.appendChild(msgObj);  
  91.  $xp("msgdiv").appendChild(bodyObj);  
  92.  if(time != '') setTimeout("CloseMsg()",time);  
  93.  else setTimeout("CloseMsg()",2000);//默认两秒后自动消失  
  94.  return false;  
  95. }  
  96. //移除对象  
  97. function CloseMsg(){  
  98.  document.body.removeChild($xp("maskdiv"));  
  99.  $xp("msgdiv").removeChild($xp("msgbody"));  
  100.  document.body.removeChild($xp("msgdiv"));  
  101. }  
  102. //判断浏览器类型  
  103. function CheckBrowser(){  
  104.     var cb = "Unknown";  
  105.     if(window.ActiveXObject){  
  106.         cb = "IE";  
  107.     }else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
  108.         cb = "Firefox";  
  109.     }else if((typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined")){  
  110.         cb = "Mozilla";  
  111.     }else if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){  
  112.         cb = "Opera";  
  113.     }  
  114.     return cb;  
  115. }  

调用方法:

  1. onClick="NewAlertBox('测试Alert提示效果',3000);"  
标签：

给我留言