PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

原创
2016-06-24 11:54:33 788浏览

  1. " language="javascript">  
  2. $(function(){  
  3.     var query = location.search;  
  4.     var equal_index = query.lastIndexOf("=");  
  5.     var result_index = query.indexOf("result");  
  6.     var submit_index = query.indexOf("submit");  
  7.     if(result_index != -1){  
  8.         if(query.substring(equal_index + 1) == 'success') {  
  9.             $("#msg").text('保存成功');  
  10.             pupopen();  
  11.         }  
  12.     }  
  13.     if(submit_index != -1){  
  14.         if(query.substring(equal_index + 1) == 'success') {  
  15.             $("#msg").text('上报成功');  
  16.             pupopen();  
  17.         }  
  18.     }  
  19. });  
  20. function pupopen(){  
  21.     $("#bg").css("display", "block");  
  22.     $("#popbox").css("display", "block");  
  23.     $(window).scroll(function(){ $(window).scrollTop(0); });// 禁止浏览器滚屏  
  24. }  
  25.   
  26. function pupclose(){  
  27.     $("#bg").css("display", "none");  
  28.     $("#popbox").css("display", "none");  
  29.     $(window).unbind("scroll");// 恢复浏览器滚屏  
  30. }  
  31.   
  32.   
  33. body{margin:0px;}  
  34. #bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}  
  35. #popbox{position:absolute;width:300px; height:200px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#FFFFFF;}  
  36.   
  37.   
  38.   
  39.   
  40. 终于搞定这个效果了,IE和FF,OP均可以~  
  41. 先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;  
  42.   
  43.   
  44. " /> 
      



  45.   
  46. " width="70"  style="max-width:90%" onclick="pupclose()" style="cursor:pointer"/>  
  
  •   
  • 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一条:Codeforces Round #275 (Div. 1)B(线段树+位运算)_html/css_WEB-ITnose 下一条:关于坛友的一个布局问题的解答_html/css_WEB-ITnose

    相关文章

    查看更多