用js来模拟做出alert，confirm，poropmt对话框的效果？

Question

      如何用js来模拟做出alert，confirm，propmt对话框的效果？

Answer 1

弹出div层啊
jQuery dialog
thickbox
都有 你去看看

Answer 2

/** 
**   功能：弹出消息框类，背景渐变到半透明，还可以只弹出半透明层
**   作者：hch
**   日期：2010-06-10
**/
function __messageBox()
{
    var isIe=!!document.all;
    var obj = this;
    var backDiv = null;
    var messageDiv = null;
   var isAddEventListener = false;
    //设置select的可见状态
    this.setSelectState = function(state)
    {
        var slcList=document.getElementsByTagName('select');
        for(var i=0;i<slcList.length;i++)
        {
            slcList[i].style.visibility=state;
        }
     };
     
    //弹出提示框
    this.showMessageBox=function (wTitle,content,wWidth,type,confirmFun,cancelFun)
    {
        type = type||0;
        obj.showBackgroundDiv();
        messageDiv=document.createElement("div");
        messageDiv.className="mesWindow";
        var html = "<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button'  class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' >"+content+"</div>";
        if(type>0){html+="<div class='mesWindowBottom'><a href='javascript:void(0)'>确 定</a>"; if(type>1){html+="&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)'>取 消</a>";} html+="</div>"; }
        html+="<div class='clear'></div>";
        messageDiv.innerHTML=html;
        styleStr="left:"+(obj.getClientWidth()- wWidth)/2+"px;position:absolute;width:"+wWidth+"px;z-index:20000;top:" +((obj.getClientHeight()-100)/2+obj.getScrollTop()) +'px';
        messageDiv.style.cssText=styleStr;
        backDiv.appendChild(messageDiv);
        setTimeout(function(){
            var divList =messageDiv.getElementsByTagName('div') ;
            divList[0].getElementsByTagName('input')[0].onclick=function(){obj.closeWindow();if(cancelFun && cancelFun !=null)cancelFun();};
            if(type>0){ 
                var aList= divList[divList.length-2].getElementsByTagName('a');
                aList[0].onclick=function(){obj.closeWindow();if(confirmFun && confirmFun !=null)confirmFun();};
                if(type>1){ aList[1].onclick=function(){obj.closeWindow();if(cancelFun && cancelFun !=null)cancelFun();};}
            }
        },50);
        if(!isAddEventListener){
          if(window.addEventListener){
               window.addEventListener('scroll', function(e){ obj.setMessageBoxTop(1); },false); 
                window.addEventListener('resize', function(e){obj.setDivSize();  },false); 
            }else{
               window.attachEvent("onscroll",function(){ obj.setMessageBoxTop(1);});  
               window.attachEvent("onresize",function(){ obj.setDivSize(); });        
            }
          isAddEventListener = true;
        }  
    };
    this.setDivSize=function(){
        if(backDiv!=null)
        {
            backDiv.style.width = document.documentElement.scrollWidth ;
            backDiv.style.height=document.documentElement.scrollHeight;
            var div= backDiv.getElementsByTagName('div')[0];
            div.style.width = document.documentElement.scrollWidth ;
            div.style.height=document.documentElement.scrollHeight;
        }
        if(messageDiv!=null){
             messageDiv.style.top=(( obj.getClientHeight() -  messageDiv.offsetHeight)/2 + obj.getScrollTop()) +'px';
             messageDiv.style.left=(( obj.getClientWidth() -  messageDiv.offsetWidth)/2 ) +'px'; 
         }
    }
    this.setMessageBoxTop=function(p)
    {
        if(messageDiv==null){return;}
        var toTop =toTop = ( obj.getClientHeight() -  messageDiv.offsetHeight)/2 + obj.getScrollTop();
    var top = parseInt( messageDiv.style.top);
    if(top< toTop - p/2 )
    {   
        top+=p;
    messageDiv.style.top = (top) +'px';
    setTimeout(function(){obj.setMessageBoxTop(p);},2);
    }else if(top>toTop +p/2 ){
     top-=p;
    messageDiv.style.top = (top) +'px';
    setTimeout(function(){obj.setMessageBoxTop(p);},2);
    }else{
            messageDiv.style.top = (toTop) +'px';
        }
    };
    //让背景渐渐变暗
     this.showBackground=function(objDiv,endInt)
    {
        if(isIe)
        {
            objDiv.filters.alpha.opacity+=5;
            if(objDiv.filters.alpha.opacity<endInt)
            {
                setTimeout(function(){obj.showBackground(objDiv,endInt)},5);
            }
        }else{
            var al=parseFloat(objDiv.style.opacity);al+=0.05;
            objDiv.style.opacity=al;
            if(al<(endInt/100))
            {setTimeout(function(){obj.showBackground(objDiv,endInt)},5);}
        }
    };
    //显示全屏的一个半透明div
     this.showBackgroundDiv=function()
    {
        obj.closeWindow();
        if(isIe){obj.setSelectState('hidden');}
        backDiv =document.createElement("div");
        var bWidth=parseInt(document.documentElement.scrollWidth);
        var bHeight=parseInt(document.documentElement.scrollHeight);
        backDiv.style.cssText="top:0px;left:0px;position:absolute;width:"+bWidth+"px;height:"+bHeight+"px;z-index:9999;";
        var opacityDiv = document.createElement("div");
        opacityDiv.style.cssText="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:10000;filter:alpha(Opacity=0);-moz-opacity:0;opacity:0;";
        backDiv.appendChild(opacityDiv);
        document.body.appendChild(backDiv);
        obj.showBackground(opacityDiv,50);
       //setTimeout(function(){obj.setDivSize();},50);
    };
    //关闭窗口
     this.closeWindow=function()
    {
        if(backDiv!=null)
        {
            backDiv.parentNode.removeChild(backDiv);
            backDiv = null;
            messageDiv = null; if(isIe){obj.setSelectState('');}
        }
       
     };
    /********************
     * 取窗口滚动条滚动高度 
     ******************/
    this.getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
    /********************
     * 取窗口可视范围的高度 
     *******************/
    this.getClientHeight=function()
    {
         return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientHeight:document.documentElement.clientHeight;         
    };
    /********************
     * 取窗口可视范围的宽度 
     *******************/
    this.getClientWidth=function()
    { 
       return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
    };
 }
    window.alert=function(m,t,confirmFun,cancelFun)
    {   
        t= (t&&t!=null&&t!='')?t:"系统消息";
        new __messageBox().showMessageBox(t,m,300,1,confirmFun,cancelFun);
    }
    window.confirm=function(m,t,confirmFun,cancelFun){
         t= (t&&t!=null&&t!='')?t:"系统消息";
        new __messageBox().showMessageBox(t,m,300,2,confirmFun,cancelFun);
    }      
 /**   
  调用方式    
 var messContent="<div style='padding:20px 10px 20px 10px;text-align:left;'><%= this.Language.RegistrationSuccessfulMessage %></div>";
var msg = new __messageBox();
 // 弹出提示框
 msg.showMessageBox('标题',messContent,300);
 
 // 弹出半透明的div
  msg.showBackgroundDiv()// 别忘记调用样式
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; height:22px; line-height:22px;}
.mesWindowContent{margin:4px;font-size:12px; height:1%;}
.mesWindow .close{height:15px;width:40px;border:none;cursor:pointer;text-decoration:underline;background:#fff;text-align:right;}
 */

Answer 3

补充一下，要求用原生js来实现，不是用jquery

Answer 4

那也可以用YSPROMPT这个JS库。必要的话就自己看着改改。

Answer 5

extjs 里面alert confirm 

Answer 6

我那里有很不错的这一类的东西，还有Demo呢，你可以看下。很完整的
http://download.csdn.net/source/2800561这是下载地址。
还可以自定义皮肤呵呵