JQuery Popup Opacity

Question

JQuery Popup Opacity

0

 <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

ronquiq 24 фев. 2014, в 16:23

Источник

1

если вы выполняете несколько таких CSS, вам нужно сделать это следующим образом: .css({ "background":"lightgray", "opacity":"0.4","filter":"alpha(opacity=40)" })
Pete 24 фев. 2014, в 15:16
0

Спасибо, Пит, если я добавлю css, как ты сказал, всплывающее окно и фон тела меняются в зависимости от цвета, но мне нужен фон тела
ronquiq 24 фев. 2014, в 15:50
0

да, если вы примените непрозрачность к телу, это будет каскадно и применимо ко всем детям тела
Pete 24 фев. 2014, в 15:56
0

Почему бы вам не попробовать диалоговое окно jQuery UI? jqueryui.com/dialog/#default
aerojun 24 фев. 2014, в 15:58

Показать ещё 2 комментария

Теги:

jquery

2 ответа

0

Самое простое, что вы можете сделать, это создать div, который будет удерживать фон и изменять его непрозрачность:

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

Затем просто нарисуйте его так, чтобы он покрывал весь фон страницы. Вот пример, взятый из ответа на другой вопрос здесь:

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

Наконец, когда вы открываете всплывающее окно, просто установите непрозрачность #backgrounddiv с помощью JQuery, как сказал Пит в своем комментарии:

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

Joao 24 фев. 2014, в 13:08

0

Благодарю вас. Я принял ваше предложение, но всплывающее окно не открывается, когда я нажимаю кнопку. Не могли бы вы объяснить, с моим кодом, вставленным выше
ronquiq 24 фев. 2014, в 16:07
0

Я отредактировал свой ответ, чтобы он больше подходил для этого случая. Вы получаете какие-либо ошибки на консоли разработчика? Если вы вызываете loadPopupBox () до стилизации фонового div, это должно сработать.
Joao 24 фев. 2014, в 16:11
0

Вот код, который я добавил, сэр: jsfiddle.net/gansai/f78f4
ronquiq 24 фев. 2014, в 16:19
0

Вот скрипка, работающая так, как вы хотели jsfiddle.net/f78f4/3 Я изменил стиль непрозрачности на фоновый rgba, потому что в противном случае все становилось прозрачным, а не только фон.
Joao 24 фев. 2014, в 16:45
0

Спасибо, Жоао ... но это был тяжелый код, который я чувствую
ronquiq 25 фев. 2014, в 09:01

Показать ещё 3 комментария

Ещё вопросы

если вы выполняете несколько таких CSS, вам нужно сделать это следующим образом: .css({ "background":"lightgray", "opacity":"0.4","filter":"alpha(opacity=40)" })
Спасибо, Пит, если я добавлю css, как ты сказал, всплывающее окно и фон тела меняются в зависимости от цвета, но мне нужен фон тела
да, если вы примените непрозрачность к телу, это будет каскадно и применимо ко всем детям тела
Почему бы вам не попробовать диалоговое окно jQuery UI? jqueryui.com/dialog/#default
Благодарю вас. Я принял ваше предложение, но всплывающее окно не открывается, когда я нажимаю кнопку. Не могли бы вы объяснить, с моим кодом, вставленным выше
Я отредактировал свой ответ, чтобы он больше подходил для этого случая. Вы получаете какие-либо ошибки на консоли разработчика? Если вы вызываете loadPopupBox () до стилизации фонового div, это должно сработать.
Вот код, который я добавил, сэр: jsfiddle.net/gansai/f78f4
Вот скрипка, работающая так, как вы хотели jsfiddle.net/f78f4/3 Я изменил стиль непрозрачности на фоновый rgba, потому что в противном случае все становилось прозрачным, а не только фон.
Спасибо, Жоао ... но это был тяжелый код, который я чувствую

rolo1091 · Accepted Answer · 2014-02-24T12-43-00.000Z

Вы можете попробовать, установив opacity = 0.3 для exaple в тело, а затем установите, а затем установите для popup непрозрачность = 1! Important. Это должно работать

Здесь у вас есть, как установить непрозрачность http://www.w3schools.com/css/css_image_transparency.asp