window.alert() 使用警告、提示和确
代码如下 | 复制代码 |
<html> <head> <script type="text/javascript"> function message() { alert("该提示框是通过 onload 事件调用的。") } </script> </head> <body onload="message()"> </body> |
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('你确定要取消交易吗?')){
|
prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框
var theResponse = window.prompt("欢迎?","请在此输入您的姓名。");
例1
代码如下 | 复制代码 |
<script language="javascript" type="text/javascript"> function prom(href) { var name=prompt("input the name",""); if(name=="admin") <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);" |