请教js如何做一个层

如何做一个弹出层模仿alert的效果，上面有个按钮，居中显示，大小和alert差不多？

解决方案 »

  1.   

    这种东西太多啦~~~
    楼主biadu。google，一搜一大把~~~<html>
    <head>
    <title>弹出窗口(可拖动，背景透明)</title>
    <script type="text/javascript">
    <!--
    /*FileName:AlertMsg.js
    title:提示标题
    content:提示的内容*/
    document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
    function $(id){ return document.getElementById(id)}
    function AlertMsg(title,content){
    var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con; 
    con = "<table style='border:0;'><tr><td><input type='button' value='确定' onclick='CloseMsg();'/></td></tr></table>";
    //弹出窗口设置
    msgw = 300;   //窗口宽度 
    msgh = 150;   //窗口高度 
    msgbg = "#FFF";    //内容背景
    msgcolor = "#000";   //内容颜色
    bordercolor = "#000"; //边框颜色 
    titlecolor = "#FFF"; //标题颜色
    titlebg = "#369";   //标题背景
    //遮罩背景设置 
    var sWidth,sHeight; 
    sWidth = screen.availWidth; 
    sHeight = document.body.scrollHeight; 
    //创建遮罩背景 
    var maskObj = document.createElement("div"); 
    maskObj.setAttribute('id','maskdiv'); 
    maskObj.style.position = "absolute"; 
    maskObj.style.top = "0"; 
    maskObj.style.left = "0"; 
    maskObj.style.background = "#777"; 
    maskObj.style.filter = "Alpha(opacity=30);"; 
    maskObj.style.opacity = "0.3"; 
    maskObj.style.width = sWidth + "px"; 
    maskObj.style.height = sHeight + "px"; 
    maskObj.style.zIndex = "10000"; 
    document.body.appendChild(maskObj); 
    //创建弹出窗口
    var msgObj = document.createElement("div") 
    msgObj.setAttribute("id","msgdiv"); 
    msgObj.style.position ="absolute";
    msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
    msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height = msgh + "px";
    msgObj.style.fontSize = "12px";
    msgObj.style.background = msgbg;
    msgObj.style.border = "1px solid " + bordercolor; 
    msgObj.style.zIndex = "10001"; 
    //创建标题
    var thObj = document.createElement("div");
    thObj.setAttribute("id","msgth"); 
    thObj.className = "DragAble";
    thObj.style.cursor = "move";
    thObj.style.padding = "4px 6px";
    thObj.style.color = titlecolor;
    thObj.style.background = titlebg;
    var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
    thObj.innerHTML = titleStr;
    //创建内容
    var bodyObj = document.createElement("div");
    bodyObj.setAttribute("id","msgbody"); 
    bodyObj.style.padding = "10px";
    bodyObj.style.lineHeight = "1.5em";
    bodyObj.innerHTML = con;
    var txt = document.createTextNode(content)
    bodyObj.appendChild(txt);
    //生成窗口
    document.body.appendChild(msgObj);
    $("msgdiv").appendChild(thObj);
    $("msgdiv").appendChild(bodyObj);
    }
    function CloseMsg(){
    //移除对象
    document.body.removeChild($("maskdiv")); 
    $("msgdiv").removeChild($("msgth")); 
    $("msgdiv").removeChild($("msgbody")); 
    document.body.removeChild($("msgdiv")); 
    }
    //拖动窗口
    var ie = document.all;   
    var nn6 = document.getElementById&&!document.all;   
    var isdrag = false;   
    var y,x;   
    var oDragObj;   function moveMouse(e) {   
    if (isdrag) {   
    oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";   
    oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";   
    return false;   
    }   
    }   function initDrag(e) {   
    var oDragHandle = nn6 ? e.target : event.srcElement;   
    var topElement = "HTML";   
    while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {   
    oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;   
    }   
    if (oDragHandle.className=="DragAble") {   
    isdrag = true;   
    oDragObj = oDragHandle.parentNode;   
    nTY = parseInt(oDragObj.style.top);   
    y = nn6 ? e.clientY : event.clientY;   
    nTX = parseInt(oDragObj.style.left);   
    x = nn6 ? e.clientX : event.clientX;   
    document.onmousemove = moveMouse;   
    return false;   
    }   
    }   
    document.onmousedown = initDrag;   
    document.onmouseup = new Function("isdrag=false");   
    //--> </script>
    </head>
    <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="100" align="center">
    <p><a href="javascript:AlertMsg(&quot;温馨提示&quot;,'')">点我试试吧!</a></p></td>
      </tr>
        <tr>
        <td align="center">
    <div style="height:600px">
    <p>互相学习</p>
    </div>
    </td>
      </tr>
    <p>&nbsp;</p>
    <input type="text" name="name" size="20"/></table>
    </div>
    </body>
    </html>