Оригинальное оформление модального окна

Разработка Оригинальное оформление модального окна

Нет прав для скачивания
Оригинальное оформление модального окна.
Саму разметку писать не будет она очень большая c svg, перейдем пожалуй сразу к js:
JavaScript:
$(document).ready(function() {
    setTimeout(function(){
          $(".card__title").removeClass('is-animated');
    }, 2000);
    
    $('.js-trigger').on('click', function() {
        //hide body overflow
        $('body').addClass('hide-overflow');
        //hide card
        $('.card').addClass('is-gone');
        //reset shake animate and button
        $('#overlay-modal').removeClass('animate-shake');
        $(".js-trigger--shake").show();
        //add class to open modal
        $('#overlay-modal').toggleClass('is-open');
        $('#overlay-background').addClass('overlay-background is-open');
    });
    
    //variable to set animate class type
    var setAnimationClass = function(type) {
        $('#overlay-modal').removeClass().addClass('is-animated' + ' ' + type);
    };
    
    //add value as class to modal
    $('.js-animated').change(function() {
        var animatedModal = $(this).val();
        setAnimationClass(animatedModal);
    });
    
    //add class on load to modal
    //$('.modal-box').addClass();
    
    //add animate shake to modal after it's open
    $('.js-trigger--shake').on('click', function() {
        $('#overlay-modal').removeClass().addClass('is-animated  animate-shake  is-open');
        $(".js-trigger--shake").hide();
        $('.svg-fixed').addClass('is-clean');
    });
    
    //add animate zoomOut to modal before it's close
    $('.js-trigger--close').on('click', function() {
        //remove hide body overflow
        $('body').removeClass('hide-overflow');
        //show card
        $('.card').toggleClass('is-gone');
        
        $('#overlay-modal').removeClass().addClass('is-animated  animate-zoomOut  is-open');
        $('#overlay-background').removeClass().addClass('is-animated  animate-opacityReverse  is-open');
        $('.svg-fixed').removeClass('is-clean');
        setTimeout(function(){
              $("#overlay-modal").removeClass('animate-zoomOut  is-open');
            $("#overlay-background").removeClass('animate-opacityReverse  is-open');
            var animatedModal = $('.js-animated').val();
            setAnimationClass(animatedModal);
        }, 100);
    });
    
    //add animate shake to modal after is open
    $('.js-hand-note').on('mouseenter', function() {
        $('.hand-note').addClass('is-animated');
        $(this).removeClass('is-animated');
    });
    $('.js-hand-note').on('mouseleave', function() {
        $('.hand-note').removeClass('is-animated');
    });
});
Смотрим результат:
fg42.gif
Автор
baltun
Скачиваний
1
Просмотры
616
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ