CSS彈出背景視窗半透明效果

來源:互聯網
上載者:User

標籤:style   io   ar   os   java   sp   div   on   art   

  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{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}  
  37. #popbox{position:absolute;width: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>  

CSS彈出背景視窗半透明效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.