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

D
На сайте с 01.09.2015
Offline
59
106

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

<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);
}


S
На сайте с 13.10.2014
Offline
156
#1

вместо  popup_open( '#myPopup' )
написать setTimeout( popup_open , 5000, '#myPopup' );

а плавно и так должно быть. У вас там fadeIn() присутствует. Если он проявляется скачкообразно, надо смотреть ЦСС

Но если уж говорить серьезно так модальники делать уже не имеет смысла. Очень большая нагрузка на клиента и если у вас 10 модальников в очереди, то можно и клиента завесить. Ну и медленно всё работает, через jquery. Давно уже пора на ванильный джи эс переходить, а все манипуляции с окнами производить средствами цсс.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий