zoukankan      html  css  js  c++  java
  • CSS弹出背景半透明窗口

    1. <script type="text/javascript" src="<ww:url value='/js/jquery-1.8.3.min.js'/>" language="javascript"></script>  
    2. <script type="text/javascript">  
    3. $(function(){  
    4.     var query = location.search;  
    5.     var equal_index = query.lastIndexOf("=");  
    6.     var result_index = query.indexOf("result");  
    7.     var submit_index = query.indexOf("submit");  
    8.     if(result_index != -1){  
    9.         if(query.substring(equal_index + 1) == 'success') {  
    10.             $("#msg").text('保存成功');  
    11.             pupopen();  
    12.         }  
    13.     }  
    14.     if(submit_index != -1){  
    15.         if(query.substring(equal_index + 1) == 'success') {  
    16.             $("#msg").text('上报成功');  
    17.             pupopen();  
    18.         }  
    19.     }  
    20. });  
    21. function pupopen(){  
    22.     $("#bg").css("display", "block");  
    23.     $("#popbox").css("display", "block");  
    24.     $(window).scroll(function(){ $(window).scrollTop(0); });// 禁止浏览器滚屏  
    25. }  
    26.   
    27. function pupclose(){  
    28.     $("#bg").css("display", "none");  
    29.     $("#popbox").css("display", "none");  
    30.     $(window).unbind("scroll");// 恢复浏览器滚屏  
    31. }  
    32. </script>  
    33. <style type="text/css">  
    34.   
    35. body{margin:0px;}  
    36. #bg{100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}  
    37. #popbox{position:absolute;300px; height:200px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#FFFFFF;}  
    38.   
    39. </style>  
    40.   
    41. <body>  
    42. 终于搞定这个效果了,IE和FF,OP均可以~  
    43. 先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;  
    44. </br>  
    45. <div id="bg"></div>  
    46. <div id="popbox"><center style="margin-top:70px;"><img src="<ww:url value='/image/correct.jpg'/>" /> <span id="msg"></span></center>  
    47. <br/><br/><br/>  
    48. <img src="<ww:url value='/image/ok.png'/>" width="70" height="35" onclick="pupclose()" style="cursor:pointer"/>  
    49. </div>  
    50. </body>  
  • 相关阅读:
    设计模式--工厂模式
    docker
    学习的网址
    showslow小记
    .Net学习线路图
    《掌握软件测试九大技术》
    Apache和Tomcat
    Visual Studio 2017 更新到15.3后 提示错误:包含了重复的“Compile”项 的解决方法
    Asp.Net Core MVC项目实现多语言(Globalization/Localization)
    7月23日 会议纪要(项目有重要变动)
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/4081178.html
Copyright © 2011-2022 走看看