Как сделать чтобы модальное окно само закрылось через 2 секунды? При этом необходимо чтобы модальное окно открывалось с кнопки, а не с ссылки, не понимаю как это сделать сохранив дизайн
[id^=open-block]{
visibility: hidden;
opacity: 0;
position: fixed; top: 0; left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
-webkit-transition: 0.5s;
transition: 0.5s;
}
[id^=open-block]:target{
visibility: visible;
opacity: 1;
}
[id^=open-block]:target .open-block-inner{
top: 50%;
}
.open-block-inner{
position: absolute; top: 0%; left: 50%;
z-index: 1000;
width: 50%;
padding: 20px;
background: #fff;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.5s;
transition: 0.5s;
background: grey;
}
#open-block-2 .open-block-inner{
top: 100%;
left:70%;
}
#open-block-2:target .open-block-inner{
top: 90%;
}
.open-block-text{
position: relative;
}
.open-block-close{
position: absolute; top: -32px; right: -32px;
width: 24px;
height: 24px;
text-decoration: none;
text-align: center;
border: 2px solid #fff;
background: #555;
color: #fff;
font: 700 20px/20px verdana, sans-serif;
border-radius: 50%;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
.open-block-close:hover{
background: #f00;
}
<a href="#open-block-2" class="link-open-block">действие</a>
<div id="open-block-2">
<div class="open-block-inner">
<div class="open-block-text">
open-block-text-2
<a href="#" class="open-block-close" title="close">x</a>
</div>
</div>
</div>