日期:2014-05-16  浏览次数:20420 次

用js来模拟做出alert,confirm,poropmt对话框的效果?
如何用js来模拟做出alert,confirm,propmt对话框的效果?

------解决方案--------------------
/** 
** 功能:弹出消息框类,背景渐变到半透明,还可以只弹出半透明层
** 作者: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';
mess