仿163信箱的alert提示，带效果预览图，弹出层

不多说``看图 下载源代码

js文件:

function  $(str) ... {
    return document.getElementById(str);
}
function  _(str) ... {
    return document.getElementsByTagName(str);
}
function  msg(boxtitle,boxtype,boxwidth,msg,url) ... {
    $("msg_div_main").style.width = boxwidth;
    $("msg_div_main").style.left = (_("body")[0].clientWidth - boxwidth) / 2;
    $("msg_div_main").style.top  = (_("body")[0].clientHeight - 220) / 2;
    var msg_div_main_but_tmp = "<br /><br />"
                + "<button class='msg_div_main_but' id='msg_div_main_but' "
                + "οnclick="msg_close_tmp_biyuan();" + url + "">确 定</button>";
    switch(boxtype * 1)...{
        case 1:
            $("msg_div_main_content").innerHTML = msg + msg_div_main_but_tmp;
            //$("msg_div_main_but").focus();
        break;
        case 2:
            $("msg_div_main_content").innerHTML =  msg + msg_div_main_but_tmp
                             + "&nbsp;&nbsp;<button class='msg_div_main_but' "
                             + "οnclick='msg_close_tmp_biyuan();'>取 消</button>";
            //$("msg_div_main_but").focus();
        break;
        case 3:
            $("msg_div_main_content").innerHTML =  msg;
        break;
        defualt:
            $("msg_div_main_content").innerHTML =  msg;
        break;
    }
    $("msg_div_main_title").innerHTML =  boxtitle;
    $("msg_div_all").style.zIndex  = 100;
    $("msg_div_main").style.zIndex = 200;
    $("msg_div_all").style.display = "";
    $("msg_div_main").style.display = "";
    $("msg_div_all").oncontextmenu = function()...{
        return false;
    }
    $("msg_div_main").oncontextmenu = function()...{
        return false;
    }
}
function  msg_close_tmp_biyuan() ... {
    $('msg_div_all').style.display='none';
    $('msg_div_main').style.display='none';
}

// 加入对话框移动代码
var  msg_md  =   false ,msg_mobj,msg_ox,msg_oy;
document.onmousedown  =   function () ... {
    if(typeof(event.srcElement.msg_canmove) == "undefined")...{
        return;
    }
    if(event.srcElement.msg_canmove)...{
        msg_md = true;
        msg_mobj = $(event.srcElement.msg_forid);
        msg_ox = msg_mobj.offsetLeft - event.x;
        msg_oy = msg_mobj.offsetTop - event.y;
    }
}
document.onmouseup  =   function () ... {
    msg_md = false;
}
document.onmousemove  =   function () ... {
    if(msg_md)...{
        msg_mobj.style.left = event.x + msg_ox;
        msg_mobj.style.top  = event.y + msg_oy;
    }
}

document.writeln( " <style type='text/css'> "
     +   " #msg_div_all {width:100%;height:100%;position:absolute;filter:Alpha(opacity=70);background:#EFEFEF;} "
     +   " #msg_div_main {position:absolute;} "
     +   " #msg_div_main_title {font-size:12px;color:#2C71AF;font-family:verdana;cursor:default;} "
     +   " #msg_div_main_content {font-size:14px;color:#2C71AF;padding-left:8px;} "
     +   " .msg_div_main_but {background:url(img/buttonbg.gif);width:65px;heigt:20px;border:none;padding-top:3px;font-size:12px;} "
     +   " </style> "
     +   " <div id='msg_div_all' style='display:none;'></div> "
     +   " <div id='msg_div_main' style='display:none;'> "
     +   " <table width='100%' height='29' border='0' cellspacing='0' cellpadding='0'> "
     +   " <tr> "
     +   " <td width='25'><img src='img/bg_01.gif' width='25' height='29' alt='' /></td><td background='img/bg_02.gif' width='3'></td> "
     +   " <td background='img/bg_02.gif' msg_canmove='true' msg_forid='msg_div_main' id='msg_div_main_title'></td> "
     +   " <td background='img/bg_02.gif' align='right' style='padding-top:4px'> "
     +   " <img src='img/bg_05.gif' width='21' height='21' alt='关闭'  "
     +   " onMouseover="this.src='img/bg_13.gif'"  "
     +   " onMouseout="this.src='img/bg_05.gif'" onMouseup='msg_close_tmp_biyuan();'  "
     +   " onMousedown="this.src='img/bg_18.gif'"></td> "
     +   " <td width='6'><img src='img/bg_06.gif' width='6' height='29' alt='' /></td> "
     +   " </tr> "
     +   " </table> "
     +   " <table width='100%' border='0' cellspacing='0' cellpadding='0'> "
     +   " <tr> "
     +   " <td width='3' background='img/bg_07.gif'></td> "
     +   " <td bgcolor='#F7F7F7' align='center'><br /><span id='msg_div_main_content'></span><br /><br /></td> "
     +   " <td width='3' background='img/bg_08.gif'></td> "
     +   " </tr> "
     +   " <tr> "
     +   " <td width='3' height='3'><img src='img/bg_09.gif' width='3' height='3' alt='' /></td> "
     +   " <td background='img/bg_11.gif'></td> "
     +   " <td width='3' height='3'><img src='img/bg_10.gif' width='3' height='3' /></td> "
     +   " </tr> "
     +   " </table> "
     +   " </div> " );

html文件:

 

< html >
< head >
< title > 对话框的模拟演示 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gbk" >
< style > ...
body {...}{margin:0px;font-size:12px;}
button {...}{background:url(img/buttonbg.gif);width:65px;heigt:20px;border:none;padding-top:3px;font-size:12px;}
</ style >
< script  type ='text/javascript'  src ='msg.js' ></ script >
</ head >
< body  scroll ="no" >
< div  id ="bgs"  style ="padding:10px" >< br /> 首先在head里引用 < font  color ="red" > &lt; script type='text/javascript' src='msg.js' &gt;&lt; /script &gt; </ font >< p />
    调用： < font  color ="red" > οnclick=msg("提示标题","提示格式","提示宽度","提示内容","点击确定后执行的JS操作"); </ font >< p />
    提示格式：1,只有确定按钮   2,有确定和取消   3,没有按钮 < br >< br >
    
            < button  onclick ='msg("提示框标题",1,"250","这里是内容","");' > 先看看 </ button > &nbsp;
          < button  onclick ='msg("这里是标题",1,"240","可以多次反复调用！","");' > 再试试 </ button > &nbsp;
          < button  onclick ='msg("没有按纽",3,"340","无选择","");' > 无选择 </ button > &nbsp;
          < button  onclick =msg("一个带有",2,"180","按确定后转到木子网站！","window.location.href='http://blog.csdn.net/showmy';") > 选择提示 </ button > &nbsp;
          < button  onclick ='msg("系统信息",1,"400","没有解决的问题，记下来先，Firefox可以弹出窗口，但没办法移动窗体，我太忙，有时间解决。","");' > 几个问题 </ button > &nbsp;
          < button  onclick ='msg("温馨提示",1,"280","无选择无选择无选择无选择无选择","");' > 关于作者 </ button >
          < br  />
         
    </ div >
</ body >
</ html >