一个漂亮的弹出框

js代码：
function $(str){
return document.getElementById(str);
}
function _(str){
return document.getElementsByTagName(str);
}
function msg(boxtitle,boxtype,msg,afterclickOK){
$("msg_div_main").style.left = (_("body")[0].clientWidth - 424) / 2;
$("msg_div_main").style.top  = (_("body")[0].clientHeight - 200) / 2;
var msg_div_main_btnSysMsgOk = "<input class=\"syBtn\" id=\"btnSysMsgOk\" type=\"button\" value=\"确 定\" onclick=\"msg_close_tmp_biyuan();" + afterclickOK +"\" />";
var msg_div_main_MsgCancel = "<input class=\"syBtn\" id=\"btnSysMsgCancel\" type=\"button\" value=\"取 消\" onclick=\"msg_close_tmp_biyuan();\" />";
switch(boxtype * 1){
case 1:
$("msg_div_main_content").innerHTML = msg;
$("msg_div_main_title").innerHTML = boxtitle;
$("msg_div_main_btn").innerHTML = msg_div_main_btnSysMsgOk;
break;
case 2:
$("msg_div_main_content").innerHTML =  msg;
$("msg_div_main_title").innerHTML = boxtitle;
$("msg_div_main_btn").innerHTML = msg_div_main_MsgCancel + msg_div_main_btnSysMsgOk;
break;
case 3:
$("msg_div_main_content").innerHTML =  msg;
$("msg_div_main_title").innerHTML = boxtitle;
$("msg_div_main_btn").innerHTML = "";
break;
defualt:
$("msg_div_main_content").innerHTML =  msg;
$("msg_div_main_title").innerHTML = boxtitle;
$("msg_div_main_btn").innerHTML = msg_div_main_btnSysMsgOk;
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").style.height = "100%";
$("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%;position:absolute;filter:Alpha(opacity=70);background:#EFEFEF;}"
+ "#msg_div_main {position:absolute;}"
+ "span,h2,table,tr,td"
+ "{margin:0;padding:0;font-family:verdana,Arial, Helvetica, sans-serif;list-style-type:none;font-size:inherit;color:inherit;z-index:inherit}"
+ "table{border:0;border-collapse:collapse}"
+ ".syBtn{width:69px;height:24px;color:#333;background-position:-1198px -13px;cursor:hand!important;cursor:pointer;background-color:transparent;border:0;padding-top:2px}"
+ ".syBtn{padding:0}"
+ ".fLe,.fLeft{float:left}"
+ ".fRi,.fRig{float:right}"
+ ".sysWin{width:424px;z-index:100000!important}"
+ " .sysWin h2{height:28px;background-position:0 -649px}"
+ " .sysWin h2 .fLe{width:5px;height:28px;background-position:-1069px -5px}"
+ " .sysWin h2 .fRi{width:5px;height:28px;background-position:-1089px -5px}"
+ " .sysWin .icoSw{display:block;width:14px;height:14px;margin:6px 6px 0 2px;background-position:-1147px -39px;float:left}"
+ " .sysWin .icoSwAdb{background-position:-200px -6px}"
+ " .sysWin h2 span{float:left;padding-top:8px;font-weight:normal;cursor:default}"
+ " a.clsWin{width:14px;height:14px;display:block;float:right;background-position:-1181px -38px;margin:6px 4px 0 0}"
+ " a.clsWin:hover{background-position:-1199px -38px}"
+ " .sysWin div.bdy{background-position:-747px 0;background-repeat:repeat-y;background-color:#FFF}"
+ " .sysWin div.bdyCtn{padding:20px;margin:0 3px;color:#333}"
+ " .swTb{line-height:160%}"
+ " .swTb tr{vertical-align:middle}"
+ " .swTb th{width:70px}"
+ " *:lang(zh) .swTb th{width:55px}"
+ " .icoIfo{width:37px;height:37px;background-position:-324px -42px;display:block}"
+ " .swTit{cursor:default}"
+ " .swTit p,.swTit span{cursor:default}"
+ " .sysWin div.bot{height:45px;background-position:0 -705px;position:relative;border:0}"
+ " .sysWin .bot .fLe{width:5px;height:45px;background-position:-1070px -48px;position:absolute;left:0;top:0}"
+ " .sysWin .bot .fRi{width:5px;height:45px;background-position:-1089px -48px;position:absolute;right:0;top:0}"
+ " .sysWin .bot .syBtn{float:right;margin:5px 10px 0 5px}"
+ " .sysWin .msg1{height:120px;text-align:center;line-height:120px}"
+ " .msg1Tb{height:120px;text-align:center;width:99%;line-height:180%}"
+ " .msg1Tb tr{vertical-align:middle}"
+ " .msg1Tb td{padding-top:10px;padding-bottom:15px} .sysWin .bot{text-align:center;padding:4px;border-top:1px solid #E5E5E5}"
+ " .sysWin .btnFnt{width:80px}"
+ " .swEroMsg{font-size:12px;margin-left:110px;color:#990000}"
+ "h2{font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif,\"����\"}"
+ ".sysWin h2 span{color:#2C71AF}"
+ ".swTit{color:#06559B}"
+ ".f12{ font-size:12px}"
+ ".f14,.gNav li a,.swTit"
+ "{font-size:14px}"
+ ".sysWin div.bdyCtn{background-color:#FBFEFF}"
+ ".sysWin h2 .fLe,.sysWin h2 .fRi,.sysWin .bdy,.sysWin .bot .fLe,.sysWin .bot .fRi,.syBtn,"
+ "{ background-image:url(f1.gif); background-repeat:no-repeat}"
+ "body.gb{ background-repeat:repeat-y}"
+ ".icoIfo"
+ "{ background-image:url(f1png.png); background-repeat:no-repeat}"
+ ".sysWin h2,.sysWin .bot"
+ "{ background-image:url(f2.gif); background-repeat:repeat-x}"
+ ".icoSw,a.clsWin"
+ "{ background-image:url(ico.gif); background-repeat:no-repeat}"
+ "</style>"
+ "<div id='msg_div_all' style='display:none;'></div>"
+ "<div id='msg_div_main' style='display:none;'>"
+ "        <div class=\"sysWin\" id=\"sysMsgWin\" style=\"z-index: 999; \">"
+ "           <h2 msg_canmove=\"true\" msg_forid=\"msg_div_main\">"
+ "               <div class=\"fLe\" >"
+ "                </div>"
+ "               <b class=\"icoSw\" id=\"icoSw\" msg_canmove=\"true\" msg_forid=\"msg_div_main\"></b><span id=\"msg_div_main_title\" msg_canmove=\"true\" msg_forid=\"msg_div_main\">ϵͳ��ʾ</span><div class=\"fRi\" >"
+ "                </div>"
+ "                <a class=\"clsWin\" id=\"btnSysInfoClose\" title=\"�ر�\" href=\"javascript:msg_close_tmp_biyuan();\"></a>"
+ "            </h2>"
+ "            <div class=\"bdy\">"
+ "                <div class=\"bdyCtn\">"
+ "                    <table class=\"swTb\">"
+ "                        <tbody>"
+ "                            <tr>"
+ "                                <th>"
+ "                                    <b class=\"icoIfo\" id=\"icoIfo\"></b>"
+ "                                </th>"
+ "                                <td>"
+ "                                    <span class=\"swTit\" id=\"msg_div_main_content\"></span></td>"
+ "                            </tr>"
+ "                        </tbody>"
+ "                    </table>"
+ "                    <div class=\"clear\">"
+ "                    </div>"
+ "                </div>"
+ "            </div>"
  + "            <div class=\"bot\">"
+ "                <div class=\"fLe\">"
+ "                </div><div id=\"msg_div_main_btn\"></div>"
+ "                <div class=\"fRi\"></div>"
+ "            </div>"
+ "        </div></div>");
-----------------------------------------------
Html页面：
      
<button onclick='msg("提示框标题",1,"这里是内容","");'>先看看</button>&nbsp;
         <button onclick='msg("这里是标题",1,"可以多次反复调用！","");'>再试试</button>&nbsp;
         <button onclick='msg("没有按纽",3,"无选择","");'>无选择</button>&nbsp;
         <button onclick=msg("一个带有",2,"按确定后转到木子网站！","window.location.href='http://www.moozi.net';")>选择提示</button>&nbsp;
         <button onclick='msg("系统信息",1,"没有解决的问题，记下来先，Firefox可以弹出窗口，但没办法移动窗体，我太忙，有时间解决。","");'>几个问题</button>&nbsp;
         <button onclick='msg("温馨提示",1,"无选择无选择无选择无选择无选择","");'>关于作者</button>