CSS弹出背景半透明窗口
分类:
IT文章
•
2022-05-05 12:06:54
CSS弹出背景半透明窗口
- <scripttype="text/javascript"src="<ww:urlvalue='/js/jquery-1.8.3.min.js'/>"language="Javascript"></script>
- <scripttype="text/javascript">
- $(function(){
- varquery=location.search;
- varequal_index=query.lastIndexOf("=");
- varresult_index=query.indexOf("result");
- varsubmit_index=query.indexOf("submit");
- if(result_index!=-1){
- if(query.substring(equal_index+1)=='success'){
- $("#msg").text('保存成功');
- pupopen();
- }
- }
- if(submit_index!=-1){
- if(query.substring(equal_index+1)=='success'){
- $("#msg").text('上报成功');
- pupopen();
- }
- }
- });
- functionpupopen(){
- $("#bg").css("display","block");
- $("#popbox").css("display","block");
- $(window).scroll(function(){$(window).scrollTop(0);});//禁止浏览器滚屏
- }
-
- functionpupclose(){
- $("#bg").css("display","none");
- $("#popbox").css("display","none");
- $(window).unbind("scroll");//恢复浏览器滚屏
- }
- </script>
- <styletype="text/css">
-
- body{margin:0px;}
- #bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter:Alpha(opacity=50);opacity:0.5;background:#000000;display:none;}
- #popbox{position:absolute;width:300px;height:200px;left:50%;top:50%;margin:-200px00-200px;display:none;background:#FFFFFF;}
-
- </style>
-
- <body>
- 终于搞定这个效果了，IE和FF,OP均可以~
- 先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter:Alpha(opacity=60);在非IE中用opacity:0.60;
- </br>
- <divid="bg"></div>
- <divid="popbox"><centerstyle="margin-top:70px;"><imgsrc="<ww:urlvalue='/image/correct.jpg'/>"/><spanid="msg"></span></center>
- <br/><br/><br/>
- <imgsrc="<ww:urlvalue='/image/ok.png'/>"width="70"height="35"onclick="pupclose()"style="cursor:pointer"/>
- </div>
- </body>
