彈出式窗口jQuery

Question

我發現了一個顯示彈出式窗口的代碼，但它在透明窗口上工作（opacity: 0），我希望它使用顯示窗口（display: none），因爲我的網站中間有透明窗口不能正常工作。

這裏是我的代碼JS：

$(window).load(function(){ 
    jQuery(document).ready(function ($) { 

     $('[data-popup-target]').click(function() { 
      $('html').addClass('overlay'); 
      var activePopup = $(this).attr('data-popup-target'); 
      $(activePopup).addClass('visible'); 

     }); 

     $(document).keyup(function (e) { 
      if (e.keyCode == 27 && $('html').hasClass('overlay')) { 
       clearPopup(); 
      } 
     }); 

     $('.popup-exit').click(function() { 
      clearPopup(); 

     }); 

     $('.popup-overlay').click(function() { 
      clearPopup(); 
     }); 

     function clearPopup() { 
      $('.popup.visible').addClass('transitioning').removeClass('visible'); 
      $('html').removeClass('overlay'); 

      setTimeout(function() { 
       $('.popup').removeClass('transitioning'); 
      }, 200); 
     } 

    }); 
}); 

，並有我的CSS

h1{ 
    margin-top: 50px; 
} 
#popup_window{ 
    padding: 10px; 
    background: #267E8A; 
    cursor: pointer; 
    color: #FCFCFC; 
    margin: 200px 0px 0px 200px; 
} 
.popup-overlay { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background: rgba(196, 196, 196, .85); 
    top: 0; 
    left: 100%; 
    opacity: 0; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    -webkit-transition: opacity .2s ease-out; 
    -moz-transition: opacity .2s ease-out; 
    -ms-transition: opacity .2s ease-out; 
    -o-transition: opacity .2s ease-out; 
    transition: opacity .2s ease-out; 
} 
.overlay .popup-overlay { 
    opacity: 1; 
    left: 0 
} 
.popup { 
    position: fixed; 
    top: 25%; 
    left: 50%; 
    z-index: -9999; 
} 
.popup .popup-body { 
    background: #ffffff; 
    background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7)); 
    background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
    background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
    background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); 
    opacity: 0; 
    min-height: 150px; 
    width: 400px; 
    margin-left: -200px; 
    padding: 30px; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    -webkit-transition: opacity .2s ease-out; 
    -moz-transition: opacity .2s ease-out; 
    -ms-transition: opacity .2s ease-out; 
    -o-transition: opacity .2s ease-out; 
    transition: opacity .2s ease-out; 
    position: relative; 
    -moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185); 
    -webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185); 
    box-shadow: 1px 2px 3px 1px rgb(185, 185, 185); 
    text-align: center; 
    border: 1px solid #e9e9e9; 
    cursor: pointer; 
} 

.popup.visible, .popup.transitioning { 
    z-index: 9999; 
} 
.popup.visible .popup-body { 
    opacity: 1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
} 
.popup { 
    cursor: pointer; 
    display: block; 
    width: 24px; 
    height: 24px; 
    position: absolute; 
    top: 150px; 
    right: 195px; 
    background: url("images/quit.png") no-repeat; 
    text-decoration: none; 
    color: #000; 
} 

a.popup-exit { text-decoration: none; font-size: 10px; color: #000; } 

.popup .popup-content { 
    overflow-y: auto; 
} 
.popup-content .popup-title { 
    font-size: 24px; 
    border-bottom: 1px solid #e9e9e9; 
    padding-bottom: 10px; 
} 
.popup-content p { 
    font-size: 13px; 
    text-align: justify; 
} 

和PHP/HTML：

if (mysql_num_rows($query) > 0) { 
while ($info = mysql_fetch_array($query)) { 
    //http://steamcommunity.com/my/tradeoffers/privacy 
    $content .= ' 
     <div class="popup" id="popup-'.$info["id"].'"> 
      <div class="popup-body"> 
       <div class="right"><a href="#" class="popup-exit">x</a></div> 
       <center><b>'.$info["nazwa"].' (<i>'.$info["opis"].'</i>)</b></center> 
       <form action="index.php" method="POST"> 
       <input name="AddReply" type="hidden" value="1"> 
       <input name="id_s" type="text" value="'.$info["id"].'" style="display: none;" /> 
       <input name="nazwa_s" type="text" value="'.$info["nazwa"].'" style="display: none;" /> 
       <input name="opis_s" type="text" value="'.$info["opis"].'" style="display: none;" /> 
       <input name="numer" type="text" value="'.zdobadzNumer($info["cena"]).'" style="display: none;" /> 
        <table class="kupowanie" align="center"> 
        <tr> 
         <td align="right">Dostępnych sztuk</td><td class="druga"><b>'.$info["dostepnych"].'</b></td> 
        </tr> 
        <tr> 
         <td align="right">Cena</td><td class="druga"><b>'.$info["cena"].' PLN</b></td> 
        </tr> 
        <tr> 
         <td align="right">Tre¶ć SMSa</td><td class="druga"><b>'.$info["tresc"].'</b></td> 
        </tr> 
        <tr> 
         <td align="right">Numer</td><td class="druga"><b>'.zdobadzNumer($info["cena"]).'</b></td> 
        </tr> 
        <tr> 
         <td align="right">Kod zwrotny</td><td class="druga"><input type="text" name="kod" /></td> 
        </tr> 
        <tr> 
         <td align="right">Link wymiany</td><td class="druga"><input type="text" name="link" /><br /> 
         <span style="font-size:8px"> 
          Kliknij <a target="_blank" style="text-decoration:none; color: #d10915;" href="http://steamcommunity.com/my/tradeoffers/privacy">tu</a> aby zdobyć. 
         </span></td> 
        </tr> 
        <tr> 
         <td colspan="2"><input '; if ($info["dostepnych"] == 0) { $content .= "disabled "; } $content .= 'type="submit" class="akceptuj" id="akceptuj" value="Akceptuj" /></td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <hr /> 
           <table width="100%"> 
            <tr> 
             <td width="50%"><img src="addons/images/cashbill.png" width="90%" /></td> 
             <td>Nie dostałe¶ kodu zwrotnego? Kliknij <a style="text-decoration:none; color: #d10915;" href="http://reklamacje.cashbill.pl/">tutaj</a>.</td> 
            </tr> 
           </table> 
          <hr /> 
         </td> 
        </table> 
       </form> 
      </div> 
     </div> 
    '; 
} 

你能幫我出去編輯此使用display而不是混濁？

Answer 1

嘗試在0刪除彈出式覆蓋的空間，因此點擊可以通過

.popup-overlay { 
width: 0; 
height: 0; 
} 

我便無法測試，如果作品，但也許可能是足夠用的CSS display屬性替換透明度。

.popup .popup-body { 
background: #ffffff; 
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7)); 
background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); 
background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); 
display:none; 
.... 

以及類。可見：

.popup.visible .popup-body { 
    display:block;  
}