<!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>无标题文档</title><script type="text/javascript" language="javascript">
/*
*错误提示弹窗
*icon 错误的类型图标 alert警告 confirm对话框 error错误 true正确
*msg 错误提示信息
*url 用户单击确定按钮跳转的地址
*/
function alertWin(icon,msg,url){
var iWidth=document.documentElement.clientWidth;//获取网页宽度
var iHeight=document.documentElement.clientHeight;//获取网页高度
var bjObj=document.getElementById("Shade");//获取遮罩层
var msgObj=document.getElementById("Msg");//获取弹窗层
bjObj.style.display="block";//显示遮罩层
msgObj.style.display="block"; //显示弹窗层
bjObj.style.width=iWidth+"px"; //设置遮罩层的宽度
bjObj.style.height=iHeight+"px"; //设置遮罩层的高度
document.getElementById("MsgInfo").innerHTML=msg;//设置弹窗层提示信息
document.getElementById("MsgImg").src=icon+".gif";//设置弹窗层提示图标
var ww=msgObj.offsetWidth;//获取弹窗层宽度
var hh=msgObj.offsetHeight;//获取弹窗层高度
document.getElementById("tableW").style.width="360px";//设置弹窗层提示信息的宽度
msgObj.style.top=(iHeight-hh)/2+"px";
msgObj.style.left=(iWidth-360)/2+"px";
//判断是否是confirm对话框
var btn='<input id="btnPut" class="btnOut" type="button" value="确定"/>';
if(icon=="confirm"){
btn="<input id='btnPut' class='btnOut' type='button' value='确定' />";
btn+=" <input id='btnCancel' class='btnOut' type='button' value='取消'/>";
}
document.getElementById("MsgPut").innerHTML=btn;//弹窗层按钮设置
//确定按钮
document.getElementById("btnPut").onclick=function(){
bjObj.style.display="none";
msgObj.style.display="none";
if(url != "" && url != "his" && url != "loc")
{window.location=url;}
else if(url == "his")
{window.history.go(-2);}
else if(url == "loc")
{location.replace(location.href);}
}
//取消按钮
if(icon=="confirm"){
document.getElementById("btnCancel").onclick=function(){
bjObj.style.display="none";
msgObj.style.display="none";
}
}
//移动对话框
var obj=window.parent.document.getElementById("moveObj");
obj.onmousedown = function() {
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function(){
if (moveable){
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + ww < iWidth) && y > 0 && (y + hh < iHeight) ){
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
document.onmouseup = function(){
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
}
}
// 获得事件Event对象,用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}function test()
{
if(alertWin("confirm","您确认删除此条信息吗?一旦删除将无法恢复!",""))
{
//如果返回true 执行jquery删除数据库中的数据
alert("测试成功");
}
//else 什么都不执行
}
</script>
</head>
<body>
<div id="Shade" style="display:none;position:absolute;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:10;"></div>
<div id="Msg" style= "display:none; position:absolute;background-color:#fff;z-index:2011; border:6px solid #999;z-index:11; ">
<table border= "0" cellpadding= "0" cellspacing= "0">
<tr>
<td id="moveObj" style="background-color:#006699; color:#fff; letter-spacing:3px; line-height:28px; font-size:12px;padding:0px 10px; cursor:move; font-weight:bold;">提示:</td>
</tr>
<tr>
<td>
<table id= "tableW" border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td width= "48 "style= "padding:15px 20px; "><img id= "MsgImg" /></td>
<td id= "MsgInfo" style= "color:#000; font-size:13px; letter-spacing:2px; " align= "left "></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id= "MsgPut" style= "padding:10px 20px; text-align:right; background-color:#f3f3f3; border-top:1px solid #ccc; "></td>
</tr>
</table>
</div><a href="javascript:" onclick="test()">测试</a>
</body>
</html>以上代码直接复制 打开即可测试
问题:我想实现和confirm一样的效果,当我单击“测试” 链接,显示隐藏的层,然后如果单击确定则返回true 单击取消返回false,要实现这种效果,怎么实现呢?求高手指教!
问题:我想实现和confirm一样的效果,当我单击“测试” 链接,显示隐藏的层,然后如果单击确定则返回true 单击取消返回false,要实现这种效果,怎么实现呢?求高手指教!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><script type="text/javascript" language="javascript">
/*
*错误提示弹窗
*icon 错误的类型图标 alert警告 confirm对话框 error错误 true正确
*msg 错误提示信息
*url 用户单击确定按钮跳转的地址
*/
function alertWin(icon,msg,url,putFunction,cancelFunction){
var iWidth=document.documentElement.clientWidth;//获取网页宽度
var iHeight=document.documentElement.clientHeight;//获取网页高度
var bjObj=document.getElementById("Shade");//获取遮罩层
var msgObj=document.getElementById("Msg");//获取弹窗层
bjObj.style.display="block";//显示遮罩层
msgObj.style.display="block"; //显示弹窗层
bjObj.style.width=iWidth+"px"; //设置遮罩层的宽度
bjObj.style.height=iHeight+"px"; //设置遮罩层的高度
document.getElementById("MsgInfo").innerHTML=msg;//设置弹窗层提示信息
document.getElementById("MsgImg").src=icon+".gif";//设置弹窗层提示图标
var ww=msgObj.offsetWidth;//获取弹窗层宽度
var hh=msgObj.offsetHeight;//获取弹窗层高度
document.getElementById("tableW").style.width="360px";//设置弹窗层提示信息的宽度
msgObj.style.top=(iHeight-hh)/2+"px";
msgObj.style.left=(iWidth-360)/2+"px";
//判断是否是confirm对话框
var btn='<input id="btnPut" class="btnOut" type="button" value="确定"/>';
if(icon=="confirm"){
btn="<input id='btnPut' class='btnOut' type='button' value='确定' />";
btn+=" <input id='btnCancel' class='btnOut' type='button' value='取消'/>";
}
document.getElementById("MsgPut").innerHTML=btn;//弹窗层按钮设置
//确定按钮
document.getElementById("btnPut").onclick=function(){
if(typeof(putFunction)=='function') putFunction();
bjObj.style.display="none";
msgObj.style.display="none";
if(url != "" && url != "his" && url != "loc")
{window.location=url;}
else if(url == "his")
{window.history.go(-2);}
else if(url == "loc")
{location.replace(location.href);}
}
//取消按钮
if(icon=="confirm"){
document.getElementById("btnCancel").onclick=function(){
if(typeof(cancelFunction)=='function') cancelFunction();
bjObj.style.display="none";
msgObj.style.display="none";
}
}
//移动对话框
var obj=window.parent.document.getElementById("moveObj");
obj.onmousedown = function() {
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function(){
if (moveable){
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + ww < iWidth) && y > 0 && (y + hh < iHeight) ){
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
document.onmouseup = function(){
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
}
}
// 获得事件Event对象,用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}function putFunction()
{
alert("测试成功!")
}function cancelFunction()
{
alert("你关闭了")
}function test()
{
alertWin("confirm","您确认删除此条信息吗?一旦删除将无法恢复!","",putFunction,cancelFunction)
}
</script>
</head>
<body>
<div id="Shade" style="display:none;position:absolute;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:10;"></div>
<div id="Msg" style= "display:none; position:absolute;background-color:#fff;z-index:2011; border:6px solid #999;z-index:11; ">
<table border= "0" cellpadding= "0" cellspacing= "0">
<tr>
<td id="moveObj" style="background-color:#006699; color:#fff; letter-spacing:3px; line-height:28px; font-size:12px;padding:0px 10px; cursor:move; font-weight:bold;">提示:</td>
</tr>
<tr>
<td>
<table id= "tableW" border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td width= "48 "style= "padding:15px 20px; "><img id= "MsgImg" /></td>
<td id= "MsgInfo" style= "color:#000; font-size:13px; letter-spacing:2px; " align= "left "></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id= "MsgPut" style= "padding:10px 20px; text-align:right; background-color:#f3f3f3; border-top:1px solid #ccc; "></td>
</tr>
</table>
</div><a href="javascript:" onclick="test()">测试</a>
</body>
</html>
{
alertWin("confirm","确认吗?","");
window.parent.document.onclick=function(){
if(getEvent().srcElement.id=="btnPut"){
alert("true");
}
}
}我这样写可以的,但是里面alert那个位置我如果在调用alertWin函数就会出现你说的循环执行的情况!
var x = -1;然后
document.getElementById("btnCancel").onclick=function(){
x=0;
document.getElementById("btnPut").onclick=function(){
x=1; 就可以得到点击的是什么了。当然也可以采用面向对象的方法。进行封装
你给打方法有点局限性,假如我单击确定了会执行putFunction()函数,这个函数就不能再执行alertWin()函数了,还有如果说我整站的对话框都按照你这样去写的话,我有很多个alertWin("confirm",…………
那么我需要定义n个相对应的putFunction()函数。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><script type="text/javascript" language="javascript">
/*
*错误提示弹窗
*icon 错误的类型图标 alert警告 confirm对话框 error错误 true正确
*msg 错误提示信息
*url 用户单击确定按钮跳转的地址
*/
var flang;
function alertWin(icon,msg,url,fun){
if(flang==null)
{
var iWidth=document.documentElement.clientWidth;//获取网页宽度
var iHeight=document.documentElement.clientHeight;//获取网页高度
var bjObj=document.getElementById("Shade");//获取遮罩层
var msgObj=document.getElementById("Msg");//获取弹窗层
bjObj.style.display="block";//显示遮罩层
msgObj.style.display="block"; //显示弹窗层
bjObj.style.width=iWidth+"px"; //设置遮罩层的宽度
bjObj.style.height=iHeight+"px"; //设置遮罩层的高度
document.getElementById("MsgInfo").innerHTML=msg;//设置弹窗层提示信息
document.getElementById("MsgImg").src=icon+".gif";//设置弹窗层提示图标
var ww=msgObj.offsetWidth;//获取弹窗层宽度
var hh=msgObj.offsetHeight;//获取弹窗层高度
document.getElementById("tableW").style.width="360px";//设置弹窗层提示信息的宽度
msgObj.style.top=(iHeight-hh)/2+"px";
msgObj.style.left=(iWidth-360)/2+"px";
//判断是否是confirm对话框
var btn='<input id="btnPut" class="btnOut" type="button" value="确定"/>';
if(icon=="confirm"){
btn="<input id='btnPut' class='btnOut' type='button' value='确定' />";
btn+=" <input id='btnCancel' class='btnOut' type='button' value='取消'/>";
}
document.getElementById("MsgPut").innerHTML=btn;//弹窗层按钮设置
//确定按钮
document.getElementById("btnPut").onclick=function(){
flang=true;
bjObj.style.display="none";
msgObj.style.display="none";
if(url != "" && url != "his" && url != "loc")
{window.location=url;}
else if(url == "his")
{window.history.go(-2);}
else if(url == "loc")
{location.replace(location.href);}
}
//取消按钮
if(icon=="confirm"){
document.getElementById("btnCancel").onclick=function(){
flang=false;
bjObj.style.display="none";
msgObj.style.display="none";
}
}
//移动对话框
var obj=window.parent.document.getElementById("moveObj");
obj.onmousedown = function() {
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function(){
if (moveable){
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + ww < iWidth) && y > 0 && (y + hh < iHeight) ){
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
document.onmouseup = function(){
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
}
setTimeout(fun,1000);
}
else
{
var cl=flang;
flang=null;
return cl;
}
}
// 获得事件Event对象,用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}function test()
{
if(alertWin("confirm","您确认删除此条信息吗?一旦删除将无法恢复!","","test()"))
{
//如果返回true 执行jquery删除数据库中的数据
alert("测试成功");
}
//else 什么都不执行
}
</script>
</head>
<body>
<div id="Shade" style="display:none;position:absolute;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:10;"></div>
<div id="Msg" style= "display:none; position:absolute;background-color:#fff;z-index:2011; border:6px solid #999;z-index:11; ">
<table border= "0" cellpadding= "0" cellspacing= "0">
<tr>
<td id="moveObj" style="background-color:#006699; color:#fff; letter-spacing:3px; line-height:28px; font-size:12px;padding:0px 10px; cursor:move; font-weight:bold;">提示:</td>
</tr>
<tr>
<td>
<table id= "tableW" border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td width= "48 "style= "padding:15px 20px; "><img id= "MsgImg" /></td>
<td id= "MsgInfo" style= "color:#000; font-size:13px; letter-spacing:2px; " align= "left "></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id= "MsgPut" style= "padding:10px 20px; text-align:right; background-color:#f3f3f3; border-top:1px solid #ccc; "></td>
</tr>
</table>
</div><a href="javascript:" onclick="test()">测试</a>
</body>
</html>