Configurar efeito modal ao fundo de um elemento com jQuery

Publicado por Raimundo Alves Portela em 09/08/2012

[ Hits: 9.150 ]

Blog: http://portelanet.com

 


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:


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:

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.loadmodal-1.0.js"></script>
</head>


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

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

Deixando o Debian com a cara do Ubuntu

Criar "ícone" para executar Scripts

Usando o SHC um compilador de Shell-Script genérico

Habilitar Cgi-Shell no Apache2

Leitura recomendada

Para sempre VOL

Melhores práticas para um site mais rápido

Tamanho das Fontes

CSS3 - Forçando quebra de linha em URL longa

Instalação do Aptana (Desevolvimento WEB)

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts