js弹出层

时间:2023-03-09 17:30:42
js弹出层

js弹出层

1.div附近显示

<div  id="message"></div>

$().delay().hide();  

2.遮罩层

表单提交后遮住页面,等返回数据后再去掉

      <div id="mask" class="mask">正在上传.......</div>
          <script type="text/javascript">
              //兼容火狐、IE8
              //显示遮罩层
              function showMask(){
                  $("#mask").css("height",$(document).height());
                  $("#mask").css("width",$(document).width());
                  $("#mask").show();
              }
              //隐藏遮罩层
              function hideMask(){     

                  $("#mask").hide();
              }  

          </script>
          <style type="text/css">
              .mask {
                      position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
                      z-index: 1002; left: 0px;
                      opacity:0.5; -moz-opacity:0.5;
                  }
          </style>   

3.自动消失

function alertWindow(content,divWidth, divHeight,dialogTop){
	if (divWidth == '') {
		divWidth = "150"
	}
	if (divHeight == '') {
		divHeight = "auto"
	}
	//距离顶部多少
	if (dialogTop == '') {
		dialogTop = "150"
	}
    var iLeft=($(window).width()-divWidth)/2;
    var iTop=($(window).height()-divHeight)/2+$(document).scrollTop();
    var divhtml=$("<div class='pop_alert'>"+content+"</div>").css(
	    	{
	    		position:'absolute',
	    		/*top:iTop+'px',*/
	    		top:($(document).scrollTop() + dialogTop) + "px",
	    		left:iLeft+'px',
	    	    display:'none',

	    	    width:divWidth+'px',
	    	    height:divHeight
    	    }
    		);
    divhtml.appendTo('body').fadeIn();
    divhtml.appendTo('body').fadeOut(2000);
}