Плавное появление модального окна с задержкой в N секунд
 

Ребят, помогите подправить код. Нужно чтобы модальное окно появлялось не сразу же после загрузки страницы, а спустя несколько секунд и плавно.

Вот код окна:

<div id="list"> 
        <!-- Наш сайт -->
        </div>
        <div class="overflow">
            <!-- Затемнение -->
        </div>
        <div class="popup" id="myPopup">
            <a href="#" class="close"></a>
            <div class="popup_title">Модальное окно</div>
        </div>

var win_top = 0;
$(document).ready(function(){
    
    // открываем модальное окно при клике по контенту
    $('#list').click(function(){
        popup_open('#myPopup');
    })
    
    // открываем модальное окно сразу при загрузки страницы
    popup_open('#myPopup');
    
    // Добавляем обработчик закрытия модального окна
    $(document).on('click', '.popup .close, .overflow', function(){
        popup_close()
        return false;
    })
    
})
function popup_open(selector){
    if (selector.length){
        win_top = $(window).scrollTop();
        $('#list').css({
            'position'  : 'fixed',
            'left'      : '0',
            'right'     : '0',
            'top'       : '0',
            // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь
            'margin-top': '-'+win_top+'px' 
        })
        $('.overflow,'+selector).fadeIn();
    }
}
function popup_close(){
    $('.overflow, .popup').hide();
    $('#list').css({
        'position'  : 'static',
        'margin-top': '0px'
    })
    // Возвращаем скролл на место
    $(window).scrollTop(win_top);
}

/*Затемнение */
.overflow{
    background: rgba(0, 0, 0, 0.7);
    position:fixed;
    top: 0px;bottom: 0px;
    left: 0px;right: 0px;
    z-index:100;
    display:none;
}
/* модальное окно */
.popup{
    position:absolute;
    z-index:101;
    background: #ffffff;
    width: 600px;
    min-height: 300px;
    margin-left: -300px;
    top: 10%;
    left: 50%;
    display:none;
}
.popup_title{
    font-size: 24px;
    text-align:center;
    padding: 50px 15px 0px 15px;
}
.popup .close{
    position:absolute;
    top: 10px;
    right: 10px;
    display:block;
    width: 17px;
    height: 17px;
    opacity: 0.5;
    background: url(../img/close.png) no-repeat center;
    -webkit-transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
.popup .close:hover{
    opacity: 0.8;
}
 
 
 
@media screen and (max-width: 650px) {
    .popup{
        width: auto;
        margin-left: 0px;
        top: 40px;
        left: 10px;
        right: 10px;
    }
}