https://shakuntalakulkarni.com/resources/js/jquery-nicemodal.js

1(function($){
2
3    var settings, overlay, modal, wrapModalContent, closeButton, htmlDefaultOverflow;
4
5    var methods = {
6        init : function(options) {
7            defaults = {
8                    
9                    width: '600px',
10                    height: 'auto',
11                    idToClose: '#close-nicemodal',
12                    defaultCloseButton: true,
13                    keyCodeToClose: 27,
14                    closeOnClickOverlay: true,
15                    closeOnDblClickOverlay: false,
16                    fadeSpeed: 'fast',
17                    onOpenModal: function(){},
18                    onCloseModal: function(){},
19                };
20
21            settings = $.extend( {}, defaults, options );
22
23            console.log('XD');
24
25            var $this =  $(this);
26
27            $this.click(function(){
28                var url;
29                // Ve se é A ou button
30                if ($(this).prop('tagName') == 'A') {
31                    url = $(this).attr('href');
32                } else {
33                    url = $(this).attr('data-url');
34                };
35                // Abre a janela modal passando a url a ser aberta
36                methods.openModal(url);
37                return false;
38            });
39
40        },
41        fitModal: function(){
42            //Pega largura da tela
43            var wW = $(window).width();
44            // Se a largura da janela modal for maior que a tela ela vira responsiva
45            if (parseInt(settings.width, 10) >= wW) {
46                modal
47                    .css({
48                        'width': '94%',
49                        'height': 'auto',
50                        'left': 0,
51                        'top': 0,
52                        'margin-top': '3%',
53                        'margin-left': '3%'
54                    });
55            } else {        
56                modal
57                    .css(
58                        {
59                            width: settings.width,
60                            height: settings.height,
61                            'margin-top': '20px',
62                            'margin-bottom': '20px'
63                        }
64                    );
65                methods.centerModal();
66            };
67        },
68        // Este método serve apenas para centralizar janelas fixas e nao responsivas
69        centerModal: function(){
70            var ml = (modal.width() / 2);
71            modal.css({'margin-left': -ml, 'left': '50%'});
72        },
73        fitOverlay: function(){
74            // Deixa o overlay com a largura e altura da janela do browser, como ela nao tem rolagem
75            // Sempre vai pegar tudo
76            var wW = $(window).width();
77            var wH = $(window).height();
78            overlay.css({width: wW, height: wH});
79        },
80        openModal: function(url, options){
81            // Se ele passar segundo argumento quer dizer que ele está abrindo direto
82            if (typeof options != 'undefined') {
83                settings = $.extend( {}, settings, options );
84            };
85            // console.log(settings);
86            /****** IMPORTANTE *********/
87            // Deve tirar o scroll do html antes de pegar o tamanho da tela 
88            // e usar o fit overlay, senao ele pega o tamanho da tela errado descontando o scroll
89
90            // Retira o scroll do html para nao bugar o overlay nem a janela modal
91            htmlDefaultOverflow = $('html').css('overflow-y');
92            $('html').css({overflow: 'hidden'});
93            
94            overlay = $('<div/>')
95                .addClass('nicemodal-overlay')
96                .appendTo('body');
97            methods.fitOverlay();
98            
99            modal = $('<div/>')
100                .addClass('nicemodal-window')
101                .appendTo(overlay);
102            methods.fitModal();
103            
104            // Só insere o botao fechar se a opção for true
105            if (settings.defaultCloseButton) {
106                closeButton = $('<div/>')
107                    .addClass('nicemodal-close-button')
108                    .appendTo(modal);
109                closeButton.click(function(){
110                    methods.closeModal();
111                    window.location.reload();     //on click refresh page
112                });
113            };
114            
115            // O conteudo que será carrega vai dentro deste div que é inserida na janela modal
116            wrapModalContent = $('<div/>

116').addClass('nicemodal-wrap-modal-content').appendTo(modal);
117            
118            // Se a opção for true ele fecha a janela com click na overlay
119            if (settings.closeOnClickOverlay) {                
120                overlay.click(function(){
121                    methods.closeModal();
122                });
123            };
124            // Se a opção for true ele fecha a janela com double click na overlay
125            if (settings.closeOnDblClickOverlay) {             
126                overlay.dblclick(function(){
127                    methods.closeModal();
128                });
129            };
130            
131            // Inserindo o evento de fechar a modal para todos os elementos que tiverem o id conforme especificado
132            // nas opções
133            wrapModalContent.on('click',settings.idToClose, function(){
134                methods.closeModal();
135                $(this).off('click', settings.idToClose);
136                return false;
137            });
138            // Ajusta overlay e modal conforme redimensiona janela
139            $(window).on('resize', function(){
140                methods.fitOverlay();
141                methods.fitModal();
142            });
143            // Coloca o stop propagation pq se clica na janela ele detecna o click no overlay tb e fecha a janela.
144            modal.on("click", function(e){
145                e.stopPropagation();
146            });
147            // Seta o evento de fechar a modal com o keycode passado nas opções
148            $(document).on('keyup', function(key){
149                if (key.which == settings.keyCodeToClose) {
150                    methods.closeModal();
151                };
152            });
153            
154            // Faz o fadein do overlay e quando acaba faz o fadein da janela modal
155            overlay.fadeIn(function(){
156                overlay.css({'overflow-y': 'auto'});
157                modal.fadeIn();
158            });
159            //Faz o load do conteudo com a url passada por parametro e faz o fadeIn dela quando terminar
160            // Tb tira o bg de loader da janela modal e dispara o evento onOpenModal
161            wrapModalContent.load(url, function(response, status, xhr){
162                $(this).fadeIn(function(){ 
163                    modal.css({'background-image': 'none'});
164                    switch (xhr.status){
165                        case 200:
166                            break;
167                        case 404:
168                            methods.loadError('Erro 404: A página requisitada não foi encontrada.');
169                            break;
170                        case 500:
171                            methods.loadError('Erro 500: Página requisitada contém erros.');
172                            break;
173                        default:
174                            methods.loadError('Erro: ' + xhr.status);
175                            break;
176                    };
177                    settings.onOpenModal.call();
178                });
179            });
180        },
181        closeModal: function () {
182            // Remove os eventos colocados com .on quando abriu
183            modal.off("click");
184            $(window).off('resize');
185            $(document).off('keyup');
186            
187            //Faz isso pra manter o scroll é nao dar um efeito estranho
188            if (overlay.height() < modal.height()) {
189                overlay.css({'overflow-y': 'scroll'});
190            };
191            
192            // Anima a janela modal ateh ele sumir da tela puxando pra cima,
193            modal.animate({top: 0, 'margin-top': -(modal.height()) +'px'}, function(){
194                // Fadeout no overlay depois da janela modal subir
195                overlay.fadeOut(function(){
196                    // Volta com o scroll do html como era antes
197                    $('html').css({'overflow-y': htmlDefaultOverflow});
198                    //Destroi as divs criadas
199                    wrapModalContent.remove();
200                    modal.remove();
201                    overlay.remove();
202                    // chama evento onCloseModal
203                    settings.onCloseModal.call();
204                });
205            });
206        },
207        loadError: function(msg){
208            var alertMessage = $('<div/>

208').addClass('nicemodal-alert-message').text(msg);
209            alertMessage.appendTo(wrapModalContent);
210        }
211    };
212
213$.fn.nicemodal = function(methodOrOptions) {
214    if ( methods[methodOrOptions] ) {
215        return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
216    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
217        // Default to "init"
218        return methods.init.apply( this, arguments );
219    } else {
220        $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.pluginName' );
221    }    
222};
223})(jQuery);