https://sazimestromy.cz/js/animatedModal.min.js

1(function ($) {
2
3  $.fn.animatedModal = function(options) {
4    var modal = $(this);
5
6    //Defaults
7    var settings = $.extend({
8      modalTarget:'animatedModal',
9      position:'fixed',
10      width:'100%',
11      height:'100%',
12      top:'0px',
13      left:'0px',
14      zIndexIn: '9999',
15      zIndexOut: '-9999',
16      color: '#39BEB9',
17      opacityIn:'1',
18      opacityOut:'0',
19      animatedIn:'zoomIn',
20      animatedOut:'zoomOut',
21      animationDuration:'.6s',
22      overflow:'auto',
23      // Callbacks
24      beforeOpen: function() {},
25      afterOpen: function() {},
26      beforeClose: function() {},
27      afterClose: function() {}
28
29
30
31    }, options);
32
33    var closeBt = $('.close-'+settings.modalTarget);
34
35    //console.log(closeBt)
36
37    var href = $(modal).attr('href'),
38      id = $('body').find('#'+settings.modalTarget),
39      idConc = '#'+id.attr('id');
40    //console.log(idConc);
41    // Default Classes
42    id.addClass('animated');
43    id.addClass(settings.modalTarget+'-off');
44
45    //Init styles
46    var initStyles = {
47      'position':settings.position,
48      'width':settings.width,
49      'height':settings.height,
50      'top':settings.top,
51      'left':settings.left,
52      //'background-color':settings.color,
53      'overflow-y':settings.overflow,
54      'z-index':settings.zIndexOut,
55      'opacity':settings.opacityOut,
56      '-webkit-animation-duration':settings.animationDuration,
57      '-moz-animation-duration':settings.animationDuration,
58      '-ms-animation-duration':settings.animationDuration,
59      'animation-duration':settings.animationDuration
60    };
61    //Apply stles
62    id.css(initStyles);
63
64    modal.click(function(event) {
65      event.preventDefault();
66      $('body, html').css({'overflow':'hidden'});
67      $( "body" ).addClass( "modal-open" );
68      if (href == idConc) {
69        if (id.hasClass(settings.modalTarget+'-off')) {
70          id.removeClass(settings.animatedOut);
71          id.removeClass(settings.modalTarget+'-off');
72          id.addClass(settings.modalTarget+'-on');
73        }
74
75        if (id.hasClass(settings.modalTarget+'-on')) {
76          settings.beforeOpen();
77          id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
78          id.addClass(settings.animatedIn);
79          id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
80        };
81      }
82    });
83
84    $(document).keyup(function(e) {
85      if (e.keyCode == 27) { // escape key maps to keycode `27`
86        $('body, html').css({'overflow':'auto'});
87        $( "body" ).removeClass( "modal-open" );
88        settings.beforeClose(); //beforeClose
89        if (id.hasClass(settings.modalTarget+'-on')) {
90          id.removeClass(settings.modalTarget+'-on');
91          id.addClass(settings.modalTarget+'-off');
92        }
93
94        if (id.hasClass(settings.modalTarget+'-off')) {
95          id.removeClass(settings.animatedIn);
96          id.addClass(settings.animatedOut);
97          id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
98        };
99      }
100    });
101
102    closeBt.click(function(event) {
103      event.preventDefault();
104      $('body, html').css({'overflow':'auto'});
105      $( "body" ).removeClass( "modal-open" );
106      settings.beforeClose(); //beforeClose
107      if (id.hasClass(settings.modalTarget+'-on')) {
108        id.removeClass(settings.modalTarget+'-on');
109        id.addClass(settings.modalTarget+'-off');
110      }
111
112      if (id.hasClass(settings.modalTarget+'-off')) {
113        id.removeClass(settings.animatedIn);
114        id.addClass(settings.animatedOut);
115        id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
116      };
117
118    });
119
120    function afterClose () {
121      id.css({'z-index':settings.zIndexOut});
122      settings.afterClose(); //afterClose
123    }
124
125    function afterOpen () {
126      settings.afterOpen(); //afterOpen
127    }
128
129  }; // End animatedModal.js
130
131}(jQuery));