При открытии сайта, на экране в «товарах» уже отображается модальное окно. А мне нужно, при нажатии на кнопку оно только появлялось, как исправить? код:
<style type="text/css">
#overlay {
position: absolute;
top: 50;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1999999999;
overflow: auto;
visibility:hidden;
opacity: 0;
transition: opacity 0.7s ease-in 0s;
}
.popup {
top: 10%;
left: 0;
right: 0;
font-size: 14px;
margin: auto;
width: 100%;
min-width: 700px;
max-width: 300px;
position: absolute;
padding: 50px 50px;
border: 1px solid #ffffff;
background-color: #fefefe;
z-index: 1000;
border-radius: 10px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}
.close {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
position: absolute;
border: none;
border-radius: 50%;
background-color: rgba(0, 130, 230, 0.9);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
outline: none;
}
.close:before {
color: rgba(0, 130, 230, 0.9);
content: "X";
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(0, 130, 230, 0.9);
}
#overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:black; font-size:16px;font-weight:bold;border-bottom:1px solid black;}
</style>