Configurar efeito modal ao fundo de um elemento com jQuery

Publicado por Raimundo Alves Portela em 09/08/2012

[ Hits: 7.469 ]

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 ([email protected])
* ============================================================================
* 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

Pino - um cliente para o Twitter

mySQL-WorkBench no Ubuntu

Pastebin e outros integrados ao seu Gnome

Shell Script no Eclipse - It is possible!

Deixar as janelas transparentes usando Compiz

Leitura recomendada

NVU - Editor HTML visual para Linux

Substituto do dreamweaver

HTML sem tabelas (tableless)

Acessibilidade e os padrões Web

Assinatura personalizada com imagens no Gmail

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts