仿Alert,可移动的层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
<html>     
<head>     
<title></title>     
    
</head>     
<body>     
       
</body>     
    
<script type="text/javascript">     
    var s = new selfAlert("タイムカード修正が行われました。<br>勤務集計?生産性の再計算を行います。");     
    
function selfAlert(msgstr){     
        
    var h = screen.availHeight;     
    var w = screen.availWidth;     
      
    var dv = document.createElement("div");     
    dv.setAttribute('id','bg');     
      
    dv.style.height = h + "px";     
    dv.style.width = w + "px";     
    dv.style.zIndex = "1111";     
    dv.style.top = 0;     
    dv.style.left = 0;     
         
        
    dv.style.background = "#fff";     
    dv.style.filter = "alpha(opacity=0)";     
    
        
    dv.style.position = "absolute";     
         
    document.body.appendChild(dv);     
    
       
    var dvMsg = document.createElement("div");     
    dvMsg.style.position = "absolute";     
    dvMsg.setAttribute('id','msg');     
    dvMsg.style.width = "300px";     
    dvMsg.style.height = "100px";     
    dvMsg.style.top="30%";     
    dvMsg.style.left="40%";     
    dvMsg.style.background = "white";     
    dvMsg.style.zIndex = "1112";     
         
    strHtml =  "<table width='300' height='25' border='0' cellspacing='0' cellpadding='0' align='center'>"    
    strHtml += "    <tr height='25' style='line-height:25px;'>"    
    strHtml += "        <td width='300' style='cursor:move;background:#F4F4F4 ;'onmousedown='oMove(parentNode.parentNode.parentNode.parentNode);'>"    
    strHtml += "            <font style='font-size:12px;font-weight:bold;color:#000;margin-left:10px;'>WEBページからのメッセージ</font></td>"   
    strHtml +=  "</tr></table>"    
    strHtml +=  "<table width='300' height='145' border='0' cellspacing='0' cellpadding='0' align='center' style='border:1px solid #343434'>"    
    strHtml += "    <tr height='112' bgcolor='#Ffffff'><td width='38' style='padding-left:25;'><img src='info.jpg'></td>"    
    strHtml += "        <td width='240' align='left'>" + "<font size='2'>"+msgstr+"</font>" + "</td></tr>"    
    strHtml += "    <tr height='33'><td colspan='2' style='background:#F4F4F4;padding-top:0px;' valign='center' align='center'>"    
    strHtml += "         <input type='button' value='OK' style='width:70;' onclick='btnclick()'></td></tr>"    
    strHtml += "</table>"    
    dvMsg.innerHTML = strHtml;     
    document.body.appendChild(dvMsg);     
      
    btnclick = function (){   
        document.body.removeChild(dv);     
        document.body.removeChild(dvMsg);     
    }     
         
    oMove = function(obj) {     
        var otop,oleft;     
        otop = event.y - obj.offsetTop;     
        oleft = event.x - obj.offsetLeft;     
        obj.setCapture();     
    
        obj.onmousemove  = function()     
        {     
            obj.style.left = event.x - oleft;     
            obj.style.top = event.y - otop;     
        }     
        obj.onmouseup  = function()     
        {     
            obj.onmousemove = null;     
            obj.style.filter = null;     
            obj.releaseCapture();     
        }     
    }     
}     
</script>     
</html>   

posted @ 2010-03-24 12:48  海底的鱼  阅读(189)  评论(0)    收藏  举报