JQuery Popup Opacity

<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本身的不透明度JQuery Popup Opacity

來源

2014-02-24 ronquiq

如果你需要像這樣做多個CSS：'.css（{「background」：「lightgray」，「opacity」：「0.4」，「filter」：「alpha（opacity = 40）」}） ' – Pete

謝謝你皮特，如果我像你說的添加CSS，彈出框和身體背景正在改變lightcolor，但我需要身體背景 – ronquiq

是啊，如果你應用不透明的身體，它會級聯一個d也將它應用到所有身體的孩子 – Pete

你可以嘗試通過設置一個不透明度= 0.3爲身體，然後設置，然後，設置爲彈出一個不透明= 1！重要。這應該工作

在這裏你如何設置不透明度http://www.w3schools.com/css/css_image_transparency.asp

來源

2014-02-24 15:18:34 rolo1091

你可以做最簡單的事情是建立一個div，將舉行的背景和改變其不透明度：

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

然後，只需設置樣式因此它涵蓋了整個頁面的背景。下面是一個答案帶到另一個問題在這裏一個例子：

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

最後，當你打開彈出，只需設置使用JQuery #backgrounddiv的不透明度就像皮特在他的評論中說：

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

來源

2014-02-24 15:55:36 Joao

謝謝。我採納了你的建議，但當我點擊按鈕時，彈出窗口不會打開。您能否請我解釋我的代碼上面粘貼 – ronquiq

我編輯我的答案，所以它更適合這種情況。您是否在開發者控制檯上發現任何錯誤？如果你在設計背景div之前調用loadPopupBox（），它應該可以工作。 – Joao

這裏是我添加的代碼先生：http://jsfiddle.net/gansai/f78f4/ – ronquiq

JQuery Popup Opacity

回答

相關問題