|
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);"
|
|
