Configurar efeito modal ao fundo de um elemento com jQuery

Publicado por Raimundo Alves Portela em 09/08/2012

[ Hits: 7.169 ]

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

Usando SSH de forma automática com senha (sem publicar chaves)

mySQL-WorkBench no Ubuntu

Pastebin e outros integrados ao seu Gnome

Terminal Guake

Acessar arquivos no Android pelo PC em rede wifi

Leitura recomendada

Para sempre VOL

Tamanho das Fontes

Ajax loading

Botões com imagem cambiável

Substituto do dreamweaver

  

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