Question

 <html> 
 <head>
   <script src="jqueryv1.10.2.js"></script>
   <script>
     $(document).ready(function()
     {
       $("#wings").click(function(event)
       {
           loadPopupBox();   
           $("body").css("background","lightgray","opacity","0.4","filter","alpha(opacity=40)");
       });

       $("#popupclose").click(function(event)
       {
           unloadPopupBox();    
           $("body").css("background","#FFF");
       });

       function loadPopupBox()
       {
          $("#popupbox").fadeIn("slow");
       }

       function unloadPopupBox()
       {
          $("#popupbox").fadeOut("normal");
       }
       $("#popupbox").hide();
     });
   </script>
   <style>
    #wings { margin-top:100px; margin-left:550px; font:bold 13px sans-serif; background:orange; 
             float:left; padding:6px; }

    #popupbox { position:fixed; _position:absolute; /*hack for IE6*/ background:#FFF; left:472px; 
                top:150px; border:2px solid lightgray; padding:15px; z-index:100px;
                font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightgray; 
                box-shadow:0px 0px 5px lightgray; }

    #popupclose { border:0px solid lightgray; color:#6FA5E2; font-family:sans-serif; font-weight:bold; 
                  line-height:15px; float:right; cursor:pointer; text-decoration:none; }
   </style>
 </head>

 <body>
   <div id="wings"> Click Me</div>
   <div id="popupbox">
     <!--div style="height:30px;"><a id="popupclose">Close</a></div>-->
     <!--or-->
     <div style="height:30px;"><img id="popupclose" src="close.png" style="float:right;"/></div>      
     <table>
      <tr><td>USERNAME : </td><td><input type="text" size="30%"></td></tr>
      <tr><td>PASSWORD : </td><td><input type="password" size="30%"></td></tr>    
      <tr><td><input type="submit" value="LOGIN"></td></tr>
     </table> 
   </div>
 </body>
</html>

我想要一个不透明的身体背景：当我打开弹出窗口时，身体背景不透明度应该是透明的。任何人都可以建议在jquery中设置不透明度

Answer 1

您可以尝试将opacity = 0.3设置为正文然后设置，然后将弹出窗口设置为opacity = 1！important。这应该工作

您可以在此处设置不透明度http://www.w3schools.com/css/css_image_transparency.asp

Answer 2

您可以做的最简单的事情是创建一个div来保存背景并改变其不透明度：

<div id="backgrounddiv"></div>

然后只需设置样式即可覆盖整个页面的背景。以下是从另一个问题的答案中得到的一个例子：

#backgrounddiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: lightgray;
}

最后，当你打开弹出窗口时，只需使用JQuery设置#backgrounddiv的不透明度，就像Pete在评论中所说：

$("#backgrounddiv").css({ "background":"lightgray", "opacity":"0.4","filter":"alpha(opacity=40)" })

JQuery Popup Opacity

2 个答案: