遮挡层问题

用jquery写个了遮挡层的插件，有点小bug,层弹出来需要渐变效果.
但我设置了层的CSS,好像没有作用,请楼下的改改。

jQuery.shelterShow = function(messageHtml) {

var shield =$("

");
shield.attr("id","shield");
shield.css({"position":"absolute","left":"0px","top":"0px","width":"100%"});
var height=((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";

shield.css("height",height);
shield.css({"background":"#333","textAlign":"center","z-index":"9999"});

    var alertFram =$("<DIV></DIV>");
    alertFram.attr("id","alertFram");
    alertFram.css({"display":"none"});
    alertFram.css({"position":"absolute","left":"35%","top":"30%","width":"200px","height":"20px"});
    alertFram.css({"background":"#fff","textAlign":"center","z-index":"10000","lineHeight":"20px"});
    alertFram.css({"border":"#000000 solid 1px","text-align":"center","":""});

    var button="<input type='button' value='hide' onclick='$.shelterClose()'/><br>";
    messageHtml=button+messageHtml;
    if (typeof(messageHtml)=="undefined"){ 
        alertFram.html(" 正在服务器上执行, 请稍候..."); 
    } 
    else{ 
        alertFram.html(messageHtml);
    } 
    $("body").append(alertFram);
    $("body").append(shield);
    alertFram.show("speed");


};

jQuery.shelterClose = function() {     
      $("#shield").remove();
      $("#alertFram").remove();
} ;

代码在哪呢？