Как сделать чтобы модальное окно само закрылось через 2 секунды?

Question

Как сделать чтобы модальное окно само закрылось через 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>

Answer 1

Можно сделать через функцию setTimeout в JavaScript:

setTimeout(() => {
    // выбрать элемент через native JS 
    // и задать через стиль
    document.getElementById('open-block-2').style.display = 'none';
}, 2000);

Если же вы используете jQuery, то можно:

setTimeout(() => {
    $('#open-block-2').hide();
}, 2000);

Answer 2

Можно имитировать клик на .close после нажатия на ссылку открытия модального окна. Кнопке открытия я присвоил #opener для удобства. Вторым параметром в функции setTimeout указываю значение 2000 - через 2000мс (=2сек) срабатывает имитация клика.

Справка: setTimeout

document.addEventListener("DOMContentLoaded", function(){
 document.querySelector("#opener").onclick = function(){
    setTimeout( function() {
        document.querySelector("[title='close']").click();
    }, 2000);
 }
});

[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" id="opener" 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>

БЛОГ НА HUSL

Как сделать чтобы модальное окно само закрылось через 2 секунды?

Ответы (2 шт):