半透明遮罩实现全屏幕遮盖css实现 + 登陆弹出框

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>22222</title>

<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>

<style type="text/css">

</style>

<script type="text/javascript">

$(document).ready(function(){

        $("#change").click(

        function(){

         $("#real").css("display","block");

         $("#mask").css("display","block");

         

         var w=document.documentElement.clientWidth ;//可见区域宽度

         var h=document.documentElement.clientHeight;//可见区域高度

         ss=document.getElementById('ha');

         //alert(w);

          $("#mask").css("width",w+"px");

          $("#mask").css("height",h+"px");

  $("#real").css("width",w+"px");

          $("#real").css("height",h+"px");

 //left:auto;top:auto;

        }

        );

}

        );

</script>

</head>

<body>

<div>

<div>

<table id="checkShowTable"

style="margin-top: 10px;">

<tr>

<th >1</th>

<th >2</th>

<th >3</th>

<th >4</th>

<th >5</th>

<th >6</th>

<th >7</th>

</tr>

</table>

<input type="button" value="查询"id="change">

</div>

<div id="mask" style="left:0;top:0;z-index:99;display:none;filter:alpha(opacity=40);opacity: 0.5;position:absolute;background-color: black;width: 100%;height: 100%"></div>

<div id="real" style="position:absolute;left:0;top:0;z-index:1000;width:100%;height: 100%;display:none;">

<div id="realInput"style="margin:auto;;width:800px;height:600px;background-color:blue"> 

3232<br>

wewe

wewe</div>

</div>

</body>

</html>

注:

id=mask  用来遮蔽原始的body 重要样式(filter:alpha(opacity=40);opacity: 0.5;position:absolute;"left:0;top:0;width: 100%;height: 100%)

id=real  的div用来建立占用所有body空间的然后

里面的id=realInput 的div是真的输入框内容 输入框自己定义着写 我只是乱写一些来代替

css

相关推荐