模态窗口代码

来源：互联网发布：天津教育出版社淘宝编辑：程序博客网时间：2024/04/27 06:38

//--------------------------------------------------------------------------------//--------------------------------------------------------------------------------//------------------------------ 模态对话框(有声音) ------------------------------//--------------------------------------------------------------------------------//----------------------- 编写胡郑好 -------------------//----------------------- QQ 52423451 ------------------//----------------------- Email huzhenghao0717@163.com ------------------//----------------------- Date 2008-1-4 ------------------//--------------------------------------------------------------------------------//-------------------------------------------------------------------------------- //------------------------- 入口 +7 重载 ---------------------------function alertMode(arg){ var argLen= arguments.length; switch(argLen) { case 1://参数说明: 消息内容 context = arguments[0]; break; case 2://参数说明: 标题,消息内容 titleMsg = arguments[0]; context = arguments[1]; break; case 4://参数说明: 标题，消息,宽,高 titleMsg = arguments[0]; context = arguments[1]; w_main = arguments[2]; h_main = arguments[3]; break; case 5://参数说明: 标题，消息,宽,高,素材所在文件夹 titleMsg = arguments[0]; context = arguments[1]; w_main = arguments[2]; h_main = arguments[3]; imgPath = arguments[4]; break; case 6://参数说明:标题，消息,宽,高,素材所在文件夹,背景显示速度 titleMsg = arguments[0]; context = arguments[1]; w_main = arguments[2]; h_main = arguments[3]; imgPath = arguments[4]; BgSpeed = arguments[5]; break; case 7://参数说明:标题，消息,宽,高,素材所在文件夹,背景显示速度,背景最大透明度 titleMsg = arguments[0]; context = arguments[1]; w_main = arguments[2]; h_main = arguments[3]; imgPath = arguments[4]; BgSpeed = arguments[5]; bgMaxOpacity = arguments[6]; break; } //禁用所有页面控件 for(var i = 0;i<document.all.length;i++) { if(document.all[i].type == 'button' || document.all[i].type == 'submit' || document.all[i].type == 'image' || document.all[i].type == 'reset') { document.all[i].disabled = true; } } showWindow();} //------------------------------------------------------------------------//显示窗体function showWindow(){ createBgDiv(); createMsgDiv(); document.body.appendChild(bgDiv); //执行显示动画 if(0 == bgOpacity){th1_id = setInterval("bgShowDH()",1);} document.body.appendChild(msgDiv); msgDiv.style.display = "block"; th3_id = setInterval("msgShowDH()",1); th4_id = setInterval("playHome()",1);} //----------------图层移动函数------------------function modeWin_MDown(Object){ document.onmouseup=modeWin_MUp; document.onmousemove=modeWin_MMove; modeWin_Obj=Object.id; Object.style.cursor = 'move'; document.all(modeWin_Obj).setCapture(); pX=event.x-(document.all(modeWin_Obj).style.pixelLeft); pY=event.y-(document.all(modeWin_Obj).style.pixelTop);} function modeWin_MMove(){ if(modeWin_Obj!='') { document.all(modeWin_Obj).style.left=(event.x-pX); document.all(modeWin_Obj).style.top=(event.y-pY); }} function modeWin_MUp(){ if(modeWin_Obj!='') { document.all(modeWin_Obj).style.cursor = 'auto'; document.all(modeWin_Obj).releaseCapture(); modeWin_Obj=''; }}//--------------------------------------------------------//创建背景层function createBgDiv(){ //当前页面宽 var sWidth =(isNS)? window.innerWidth-5 : document.body.clientWidth; //当前页面高 var sHeight=(isNS)? window.innerHeight : document.body.clientHeight; bgDiv=document.createElement("div"); bgDiv.setAttribute('id','bgDiv'); bgDiv.style.position="absolute"; bgDiv.style.top="0"; bgDiv.style.opacity="0"; bgDiv.style.left="0"; bgDiv.style.width=sWidth + "px"; bgDiv.style.height=sHeight + "px"; bgDiv.style.zIndex = "10000";} //创建消息主窗体function createMsgDiv(){ msgDiv=document.createElement("div") var msgHtmlDiv = "<table width="+w_main+" height='"+h_main+"' border='0' cellpadding='0' cellspacing='0'><tr><td width='4' height='28' background='"+titleLeftImg+"'></td><td width="+w_tr1+" height='28' background='"+titleMidImg+"'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tr><td onMouseDown = 'modeWin_MDown(msgDiv)' width="+w_tr2+"><div align='left'> "+titleMsg+"</div></td><td width='28'><img id='close_btn' align='right' src='"+closeBtn_img+"' width='28' height='25' onMouseOver='changeCloseIco(true);' onClick = 'closeAll();' onMouseOut='changeCloseIco(false);'></td></tr></table></td><td width='4' height='28' background='"+titleRightImg+"'></td></tr><tr><td colspan='3' bgcolor='#55849b'><table width='100%' height='28%' border='0' cellpadding='0' cellspacing='1'><tr><td valign='top' bgcolor='#FFFFFF'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tr><td height='12'></td></tr><tr><td><p align='center'> "+context+"</p></td></tr><tr><td height='12'></td></tr><tr><td><table width='100%' border='0' cellpadding='0' cellspacing='2'><tr><td></td><td><div align='center'><img src='"+btn_okImg+"' name='close_btn' width='80' height='25' id='ok_btn' onClick = 'closeAll();' onMouseOver='changeOkIco(true);' onMouseOut='changeOkIco(false);'></div></td><td></td></tr></table></td></tr></table></td></tr></table></td></tr></table>"; msgDiv.setAttribute("id","msgDiv"); msgDiv.setAttribute("align","center"); msgDiv.style.position = "absolute"; msgDiv.style.left = "50%"; msgDiv.style.top = "50%"; msgDiv.style.marginLeft = "-190px" ; msgDiv.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgDiv.style.width = w_main + "px"; msgDiv.style.height =h_main + "px"; msgDiv.style.textAlign = "center"; msgDiv.style.opacity = msgOpacity/100; msgDiv.style.filter="Alpha(opacity="+msgOpacity+")"; //透明度逐渐变大 msgDiv.style.display = "none"; msgDiv.style.lineHeight ="25px"; msgDiv.style.zIndex = "10001"; msgDiv.innerHTML = msgHtmlDiv;}//关闭窗口function closeAll(){ document.body.removeChild(msgDiv); if(0 != bgOpacity && 0 != th1_id){th2_id = setInterval("bgHideDH()",1);} document.body.removeChild(bgsoundItem); //禁用所有页面控件 for(var i = 0;i<document.all.length;i++) { if(document.all[i].type == 'button' || document.all[i].type == 'submit' || document.all[i].type == 'image' || document.all[i].type == 'reset') { document.all[i].disabled = false; } }} //-----------------------------------------------------------------//关闭图标的动画函数function changeCloseIco(isOver){ if(isOver) { document.getElementById('close_btn').src = closeBtn_img_cov; document.getElementById('close_btn').style.cursor = 'hand'; }else { document.getElementById('close_btn').src = closeBtn_img; }} //确定图标的动画函数function changeOkIco(isOver){ if(isOver) { document.getElementById('ok_btn').src = btn_okImg_cov; document.getElementById('ok_btn').style.cursor = 'hand'; }else { document.getElementById('ok_btn').src = btn_okImg; }} //显示背景渐变动画function bgShowDH(){ bgDiv.style.background='#777'; bgOpacity += BgSpeed;//值自加 bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=3,finishOpacity="+bgOpacity+")"; //透明度逐渐变大 bgDiv.style.opacity = bgOpacity/100; //兼容FireFox if(bgOpacity >= bgMaxOpacity ) { clearInterval(th1_id);//清除线程 }}//显示消息渐变动画function msgShowDH(){ msgOpacity += 10;//值自加 msgDiv.style.filter="Alpha(opacity="+msgOpacity+")"; //透明度逐渐变大 msgDiv.style.opacity = msgOpacity/100; //兼容FireFox if(msgOpacity >= 100 ) { clearInterval(th3_id);//清除线程 msgOpacity = 0; }} //关闭背景渐变动画function bgHideDH(){ if(0 != th2_id){ bgOpacity -= BgSpeed * 4;//值自加 if(bgOpacity >= 0) { bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=3,finishOpacity="+bgOpacity+")"; //透明度逐渐变大 bgDiv.style.opacity = bgOpacity/100; //兼容FireFox } else { bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=3,finishOpacity=0)"; //透明度逐渐变大 bgDiv.style.opacity = 0; //兼容FireFox bgOpacity = 0; clearInterval(th2_id);//清除线程 th2_id = 0; document.body.removeChild(bgDiv); } }}//音乐function playHome() { clearInterval(th4_id); bgsoundItem.src = dingMusic; document.body.appendChild(bgsoundItem);} //-----------------------------------var w_main = 400;//主框宽var h_main = 300;//主框高var imgPath = "./image/";//图片素材所在文件夹var titleMsg = "系统提示";var context = "";//消息内容var BgSpeed = 5;//背景显示速度var bgMaxOpacity = 80;//最大透明度//--------------------------------------------var h_tb1 = h_main - 28;//消息体高var w_tr1 = w_main - 8;//标题内框宽var w_tr2 = w_tr1 - 28;//标题内框中的行宽var closeBtn_img = imgPath+"close.png";var closeBtn_img_cov = imgPath+"closeCov.png";var titleLeftImg = imgPath+"msg_left.gif";var titleRightImg = imgPath+"msg_right.gif";var titleMidImg = imgPath+"msg_mid.gif";var btn_okImg = imgPath+"msg_btn.gif";var btn_okImg_cov = imgPath+"msg_btn_cov.gif";var dingMusic = imgPath+"wing.wav";var bgDiv,msgDiv;var isNS=(document.layers);var pX,pY;var modeWin_Obj='';var bgOpacity = 0;//背景临时变量值var msgOpacity = 0;//背景临时变量值var th1_id=0;//动画线程编号[显示背景线程]var th2_id=0;//动画线程编号[关闭背景线程]var th3_id=0;//动画线程编号[显示消息线程]var th4_id=0;//声音播放线程var bgsoundItem = document.createElement("bgsound");