<!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+="&nbsp;<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,要实现这种效果,怎么实现呢?求高手指教!

解决方案 »

  1.   


    问题:我想实现和confirm一样的效果,当我单击“测试” 链接,显示隐藏的层,然后如果单击确定则返回true 单击取消返回false,要实现这种效果,怎么实现呢?求高手指教!
      

  2.   

    你的意思是 没有弹出 true和 false吗?
      

  3.   

    你这样肯定不行了,他并不是javascript内置的confirm  ,弹出的时候整个页面挂起不执行了
      

  4.   

    <!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,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+="&nbsp;<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>
      

  5.   

    function test()
    {
    alertWin("confirm","确认吗?",""); 
    window.parent.document.onclick=function(){
    if(getEvent().srcElement.id=="btnPut"){
    alert("true"); 
    }

    }我这样写可以的,但是里面alert那个位置我如果在调用alertWin函数就会出现你说的循环执行的情况!
      

  6.   

    document.onclick=function(){应该是这样的,写错了
      

  7.   

    你定义一个全局变量
    var x = -1;然后
    document.getElementById("btnCancel").onclick=function(){  
           x=0;
    document.getElementById("btnPut").onclick=function(){        
         x=1;     就可以得到点击的是什么了。当然也可以采用面向对象的方法。进行封装
      

  8.   


    你给打方法有点局限性,假如我单击确定了会执行putFunction()函数,这个函数就不能再执行alertWin()函数了,还有如果说我整站的对话框都按照你这样去写的话,我有很多个alertWin("confirm",…………
    那么我需要定义n个相对应的putFunction()函数。
      

  9.   

    虽然有点假,但感觉上还是实现了<!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   用户单击确定按钮跳转的地址
    */
    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+="&nbsp;<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>