半透明遮罩实现全屏幕遮盖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是真的输入框内容 输入框自己定义着写 我只是乱写一些来代替

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值