如何讓W3schools模式示例淡出？

-5

從https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_fade我已經使用了下面的CSS類來淡入。當模式關閉時，我該如何淡出？如何讓W3schools模式示例淡出？

.w3-animate-opacity{animation: opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

下面的代碼：

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<body> 

<div class="w3-container"> 
    <h2>W3.CSS Animated Modal</h2> 

    <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button> 

    <div id="id01" class="w3-modal w3-animate-opacity"> 
    <div class="w3-modal-content w3-card-4"> 
     <header class="w3-container w3-teal"> 
     <span onclick="document.getElementById('id01').style.display='none'" 
     class="w3-button w3-large w3-display-topright">&times;</span> 
     <h2>Modal Header</h2> 
     </header> 
     <div class="w3-container"> 
     <p>Some text..</p> 
     <p>Some text..</p> 
     </div> 
     <footer class="w3-container w3-teal"> 
     <p>Modal Footer</p> 
     </footer> 
    </div> 
    </div> 
</div> 

</body> 
</html>

來源

2017-08-08 user1946932

你真的應該做一個片段，並展示我們的代碼的嘗試 –

看到所選答案的How to get Fade-in-out modal effect?

它使用：

var id01 = document.getElementById('id01'); 

document.querySelector('.close').addEventListener('click', function() { 
    id01.classList.add('w3-animate-show'); 
}) 

id01.addEventListener('animationend', function() { 
    if (this.classList.contains('w3-animate-show')) { 
    this.style.display = 'none'; 
    this.classList.remove('w3-animate-show') 
    } 
});

來源

2017-08-10 04:12:39 user1946932

如果你不想使用jQuery，你可以嘗試這些：

添加動畫：

.w3-animate-show{ 
    animation: show 0.8s; 
    animation-fill-mode:forwards; // means stop at the last status when animation finished 
} 
@keyframes show{ 
    0%{opacity:1} 
    100%{opacity:0} 
}

，並在html代碼，更改span標籤：

<span onclick="document.getElementById('id01').classList.add('w3-animate-show');" class="w3-button w3-large w3-display-topright">&times;</span>

但那只是一個動畫，模態根本不會關閉，它只是看不見的。

來源

2017-08-08 06:01:25 zhufree

感謝。我確實嘗試過，並且它可以工作 - 但只有一次。之後，點擊該按鈕不起作用。 – user1946932

下面是它的jsfiddle：https://jsfiddle.net/3cwh8myx/ – user1946932

這裏是另一個試圖做到這一點的：https：//jsfiddle.net/e280eLw1/ – user1946932

如何讓W3schools模式示例淡出？

回答

相關問題