一聚教程网:一个值得你收藏的教程网站

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

时间:2013-03-16 00:00:00 编辑:简简单单 来源:原创

window.alert() 使用警告、提示和确

 代码如下

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>

<body onload="message()">

</body>
</html>

confirm 方法的返回值为 true 或 false

 代码如下

<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>

例2

if(window.confirm('你确定要取消交易吗?')){
                 //alert("确定");
                 return true;
              }else{
                 //alert("取消");
                 return false;
    }

 


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

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

例1

 代码如下

<script language="javascript" type="text/javascript">
function prom(href)
{
var name=prompt("input the name","");


if(name=="admin")
{
var pwsd=prompt("input the password","");
if(pwsd=="admin")
{
alert("login ok...");
location.href=href;
}
else{alert("error password");}
}
else{alert("error name");}
}
</script>

<html type="button" onClick="prom();" name="prom" value="prom">

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

 代码如下

/*
 js弹窗代码:用户体验极佳的Alert提示效果
 pubdate:2011-05-26 10:15
 e-mail:xpsem2010@gmail.com
 source:小拼SEM博客
*/
//获取指定ID的元素
function $xp(id) {
 return document.getElementById(id);
}
//通用事件获取接口
function getEvent()
{
 if(CheckBrowser()=='IE')  return window.event;
 func=getEvent.caller;
 while(func!=null)
 {
  var arg0 = func.arguments[0];
  if(arg0)
  {
   if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
   || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
   {
    return arg0;
   }
  }
  func=func.caller;
 }
 return null;
}
//alert
function NewAlertBox(msg, time){//time为消失时间
 var msgbg,msgcolor,bordercolor,content,posLeft,posTop;
 //弹出窗口设置
 msgbg = "#FFF";   //内容背景
 msgcolor = "#000";  //内容颜色
 bordercolor = "#ccc";  //边框颜色
 //遮罩背景设置
 content = "这里是表情图片地址(HTML格式)" + msg;
 var sWidth,sHeight;
 sWidth = screen.availWidth - 20;//防止溢出
 if(screen.availHeight > document.body.scrollHeight){
  sHeight = screen.availHeight; //少于一屏
 }else{
  sHeight = document.body.scrollHeight; //多于一屏
 }
 //创建遮罩背景
 var maskObj = document.createElement("div");
 maskObj.setAttribute('id','maskdiv');
 maskObj.style.position = "absolute";
 maskObj.style.top = "0";
 maskObj.style.left = "0";
 maskObj.style.background = "#fff";
 maskObj.style.filter = "Alpha(opacity=40);";
 maskObj.style.opacity = "0.4";
 maskObj.style.width = sWidth + "px";
 maskObj.style.height = sHeight + "px";
 maskObj.style.zIndex = "10000";
 document.body.appendChild(maskObj);
 //创建弹出窗口
 var msgObj = document.createElement("div")
 msgObj.setAttribute("id","msgdiv");
 msgObj.style.position ="absolute";
 var event = getEvent();//申明event
 if(CheckBrowser()=='IE')
 {
  posLeft = event.clientX + 10;
  posTop = event.clientY + document.documentElement.scrollTop;
 }
 else
 {
  posLeft = event.pageX + 10 + "px";//ff下要申明px
  posTop = event.pageY + 10 + "px";
 }
 msgObj.style.top = posTop;
 msgObj.style.left = posLeft;
 msgObj.style.fontSize = "12px";
 msgObj.style.background = msgbg;
 msgObj.style.border = "1px solid " + bordercolor;
 msgObj.style.zIndex = "10001";
 //创建内容
 var bodyObj = document.createElement("div");
 bodyObj.setAttribute("id","msgbody");
 bodyObj.style.padding = "10px";
 bodyObj.style.lineHeight = "1.5em";
 //var txt = document.createTextNode(content);
 //bodyObj.appendChild(txt);
 bodyObj.innerHTML = content;
 //生成窗口
 document.body.appendChild(msgObj);
 $xp("msgdiv").appendChild(bodyObj);
 if(time != '') setTimeout("CloseMsg()",time);
 else setTimeout("CloseMsg()",2000);//默认两秒后自动消失
 return false;
}
//移除对象
function CloseMsg(){
 document.body.removeChild($xp("maskdiv"));
 $xp("msgdiv").removeChild($xp("msgbody"));
 document.body.removeChild($xp("msgdiv"));
}
//判断浏览器类型
function CheckBrowser(){
    var cb = "Unknown";
    if(window.ActiveXObject){
        cb = "IE";
    }else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
        cb = "Firefox";
    }else if((typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined")){
        cb = "Mozilla";
    }else if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){
        cb = "Opera";
    }
    return cb;
}

调用方法

onClick="NewAlertBox('测试Alert提示效果',3000);"

文章评论

热门栏目