Heim >Web-Frontend >HTML-Tutorial >CSS弹出背景半透明窗口_html/css_WEB-ITnose

CSS弹出背景半透明窗口_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:54:331037Durchsuche

  1. <script></script>" language="javascript">  
  2. <script> </script>
  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.   
  33.   
  34. body{margin:0px;}  
  35. #bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}  
  36. #popbox{position:absolute;width:300px; height:200px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#FFFFFF;}  
  37.   
  38.   
  39.   
  40.   
  41. 终于搞定这个效果了,IE和FF,OP均可以~  
  42. 先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;  
  43.   
  44.   
  45. CSS弹出背景半透明窗口_html/css_WEB-ITnose" /> 
      



  46.   
  47. CSS弹出背景半透明窗口_html/css_WEB-ITnose" width="70"  style="max-width:90%" onclick="pupclose()" style="cursor:pointer"/>  
  
  •   
  • Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel:Codeforces Round #275 (Div. 1)B(线段树+位运算)_html/css_WEB-ITnoseNächster Artikel:关于坛友的一个布局问题的解答_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen