codice:
<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>
<div id = "popup1" class = "overlay" style='visibility:hidden'>
<div class = "popup">
<h2>Chi Siamo</h2>
<a class = "close" onclick='closePopup()'>×</a>
<div class = "content">
testo overlay
</div>
</div>
</div>
<script>
function showPopup(){
document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
}
</script>
CSS: #popup1 {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.7);
transition: opacity 700ms;
opacity: 0;
}
Il "display block" non è una proprietà che può essere "mostrata parzialmente".
Un elemento ha un display block, oppure no. Non ci sono vie di mezzo.
Utilizza al suo posto la proprietà "visibility" (hidden/visible).