如何獲取CSS/JavaScript彈出過渡在

我想弄清楚如何使用CSS和少量的JavaScript彈出div。我已經儘可能地點擊一個鏈接，彈出一個框，並且在它周圍的屏幕上是灰色的，如果你點擊灰色，彈出窗口會消失。但是，我無法讓它淡入，而不是立即出現。請幫忙。這裏是我的代碼：如何獲取CSS/JavaScript彈出過渡在

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function showPopUp(el) { 
       var cvr = document.getElementById("cover") 
       var pop = document.getElementById(el) 
       cvr.style.display = "block" 
       pop.style.display = "block" 
       pop.style.opacity = "1" 
       pop.style.webkitTransform = "scale(1, 1)" 
       if (document.body.style.overflow = "hidden") { 
        cvr.style.width = "100%" 
        cvr.style.height = "100%" 
       } 
      } 
      function closePopUp(el) { 
       var cvr = document.getElementById("cover") 
       var pop = document.getElementById(el) 
       cvr.style.display = "none" 
       pop.style.display = "none" 
       document.body.style.overflowY = "scroll" 
      } 
     </script> 
     <style type="text/css"> 
      #cover { 
       display:none; 
       position:absolute; 
       left:0; 
       top:0; 
       width:100%; 
       height:100%; 
       background:gray; 
       filter:alpha(Opacity = 50); 
       opacity:0.5; 
       -moz-opacity:0.5; 
       -khtml-opacity:0.5; 
      } 

      #popup { 
       display:none; 
       left:100px; 
       top:100px; 
       width:300px; 
       height:300px; 
       position:absolute; 
       z-index:100; 
       background:white; 
       padding:2px; 
       border:1px solid gray; 
       opacity:0; 
       -webkit-transform:scale(.5, .5); 
       -webkit-transition:all .5s ease-in-out; 
      } 

      #cover-link { 
      position:absolute; 
      width:100%; 
      height:100%; 
      left:0; 
      top:0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div> 
     <div id="popup"> 
      Some Words 
     </div> 
     <a href="#" onclick="showPopUp('popup');">Show</a> 
    </body> 
</html>

的重要部分是這些：

從JavaScript：

pop.style.opacity = "1" 
pop.style.webkitTransform = "scale(1, 1)"

從CSS：

opacity:0; 
-webkit-transform:scale(.5, .5); 
-webkit-transition:all .5s ease-in-out;

一切似乎除了是工作當pop.style.webkitTransform = "scale(1, 1)"位於Javascript中時，-webkit-transform:scale(.5, .5);被忽略，而-webkit-transition:all .5s ease-in-out;只是沒有做任何事情。如果你認爲你知道可能有用的東西，你可以複製上面的代碼塊並修改它;它已經是一個完整的html文件。

的想法是讓它褪色像這樣做：

<html> 
    <head> 
     <style type="text/css"> 
      .message { 
      left:100px; 
      top: 100px; 
      width:300px; 
      height:300px; 
      position:absolute; 
      z-index:100; 
      background:white; 
      padding:2px; 
      border:1px solid gray; 
      opacity:0; 
      -webkit-transform: scale(.95, .95); 
      -webkit-transition: all .5s ease-in-out; 
      } 

      .message p { 
      padding:80px 0; 
      border-radius:3px; 
      } 

      .info:hover + .message { 
      opacity: 1; 
      -webkit-transform: scale(1, 1); 
      } 
     </style> 
    </head> 
    <body> 
     <div class="info"> 
      <p>Hover</p> 
     </div> 
     <div class="message"> 
      <p>A Simple Popup</p> 
     </div> 
    </body> 
</html>

來源

2013-10-27 treboothjD6

的主要問題，你必須是你移動從display: none到display: block。轉換不會像那樣工作。既然你已經有opacity來隱藏div，而你也在使用position: absolute，我不認爲有理由不把div放在display: block。

我也認爲最好的辦法是移動你想讓div在CSS類中顯示的屬性，並在適當的觸發器中添加和刪除該類。這使得將來也可以輕鬆修改它們。我建立了a jsBin with the recommended changes。

來源

2013-10-27 03:36:44 Evan

它的工作原理，謝謝！ – treboothjD6

除了使用此代碼，當我在彈出窗口中放置視頻時，它不會停止播放，當它點擊時，可以在不可見時點擊它。我將開始嘗試自己解決這個問題，但如果你知道解決問題的快速方法，那麼在這裏發佈會很好。 – treboothjD6

您可以將'display：none'發送到div內的視頻元素。 – Evan

如何獲取CSS/JavaScript彈出過渡在

回答

相關問題