javascript 动态创建一个遮盖层

      用javascript 动态创建一个遮盖层，当鼠标移动到上面动态创建出一个遮盖层，当鼠标离开时遮盖层不显示。

    这个方法当屏幕滚动时，可以依然跟着鼠标显示！

    

    

function createTB() {
var tt = "<table border='1px' width='300px'><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr></table>";

var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX; //找到当前鼠标的位置的X坐标
var y = e.pageY || e.clientY + scrollY; //找到当前鼠标的位置的Y坐标

openNewDiv(tt, "block", x,y);

}

    

var docEle = function () {
    return document.getElementById(arguments[0]) || false;
}
    //mask遮罩层
      function openNewDiv(tabled, displays,x,y) {
      var m = "mask";
     if (docEle(m)) document.body.removeChild(docEle(m));

     

    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    //newMask.style.zIndex = "1";

    newMask.style.width = "200px";
   //newMask.style.height = (_scrollHeight - 20) + "px";

    var e = event || window.event;

 

 

    newMask.style.top = y + "px";
    newMask.style.left =x + "px";
    newMask.style.background = "#e8e8e8";

    if (displays == "block") {
     newMask.style.display = "block";
}
else {

    newMask.style.display = "none";
}

   newMask.innerHTML = tabled;

   document.body.appendChild(newMask);

}

 <input type="button" value="create"  onmousemove="createTB()" onmouseleave="createTBs()" />