Configurar efeito modal ao fundo de um elemento com jQuery

Publicado por Raimundo Alves Portela em 09/08/2012

[ Hits: 9.410 ]

Blog: http://portelanet.com

0 0

Denuncie Favoritos Indicar Impressora

Configurar efeito modal ao fundo de um elemento com jQuery

Plugin desenvolvido para fazer o efeito de modal (uma "janela" destacada sobre outra).

Fiz este plugin para fazer o efeito de carregamento e das páginas do meu "site" http://portela.tendalinux.com, também usei o mesmo para o efeito de mostrar um elemento no meio da tela em modal, disparado por um clique, o que pode ser observado navegando nos scripts do link:

http://portela.tendalinux.com/scripts

Se desejar, poderá fazer o download da última versão aqui.

Abaixo segue o código da primeira versão:

/*
* jQuery loadmodal 1.0 - http://portela.tendalinux.com/
*
* Configura a animação para carregamento de páginas com efeito modal ao fundo
* Desenvolvido por Raimundo Portela (rai3mb@gmail.com)
* ============================================================================
* Licence:
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*/
;(function($){
    $.fn.loadmodal=function(op){
        var def = {
            classMask: 'flg_mask',
            bgcolor: '#000',
            opacity: '0.5'
        };
        var set = $.extend({},def,op);
        return this.each( function(){
            var o = $(this);
            var tem = false;
         // verifica se ja existe o div com a mascara
            $('body').find('div').each(function(){
                if ( $(this).hasClass( set.classMask ) ) {
                    tem = true;
                    set.classMask = '.'+set.classMask;
                }
            });

            if ( tem == false) {
                $('body').append("<div class='"+set.classMask+"'></div>");
                set.classMask = '.'+set.classMask;
                $(set.classMask).css({
                      'position':'absolute',
                      'left':'0',
                      'top':'0',
                      'z-index':'9000',
                      'background-color':set.bgcolor,
                      'opacity': set.opacity,
                      'display':'none'
                  });
            }

         // css do objeto recebido
            o.css({
                'position':'absolute',
                'left':'0',
                'top':'0',
                'display':'none',
                'z-index':'9999'
            });

            var docH = $(document).height(); // altura do documento
            var winH = $(window).height(); // altura da janela
            var winW = $(window).width(); // largura da janela
            $(set.classMask).css({'width':winW,'height':docH}); // define o tamanho da mascara

            $(set.classMask).fadeIn(500); // mostra a mascara com efeito fadeIn
            $(set.classMask).fadeTo("slow",0.5);
            // posiciona o objeto alvo no meio da tela
            o.css('top',  winH/2-o.height()/2);
            o.css('left', winW/2-o.width()/2);
            o.fadeIn(500);

         // configura a acao para remover o efeito
            $(set.classMask).live('change', function () {
                $(this).hide();
                o.remove();
            });
        });
    };
})(jQuery);

Usando

Importe o arquivo para sua página, e o mesmo estará pronto para uso:

Agora para usá-lo:

// para criar o efeito antes de uma requisição ajax, no caso o loading...
$.ajaxSetup({
      error: function( xhr, er, index, anchor ) {
         $('.mload').trigger('change');
      },
      beforeSend: function(xhr) {
         // aqui adiciono uma imagem para mostrar que a página está carregando..
         $('body').append("<div class='icon'><img src='load_32.gif' /></div>");
         // aqui adiciono uma imagem para mostrar que a página está carregando..
         $('.icon').loadmodal({
            classMask: 'mload'
         });
      },
      complete: function(xhr, status) {
         $('.mload').trigger('change');
      }
});

// se desejar apenas o efeito modal e ainda que ao ser clicado fora do elemento, o mesmo seja fechado:
$('.mload').live('click', function() {
      $(this).trigger('change');
});

Espero que gostem.
@rai3mb

Outras dicas deste autor

Use seu Android como um Laser Pointer

Deixar as janelas transparentes usando Compiz

Venha Conhecer o Yad

Criando template para o Geany

Monitorando seu HD - Listando detalhes sobre os arquivos abertos no sistema

Leitura recomendada

HTML sem tabelas (tableless)

Melhores práticas para um site mais rápido

Como personalizar o thumbnail de seu site no Facebook

Assinatura personalizada com imagens no Gmail