Pular para o conteúdo

Configurar efeito modal ao fundo de um elemento com jQuery

Dica publicada em Javascript / Design
Raimundo Alves Portela rai3mb
Hits: 10.049 Categoria: Javascript Subcategoria: Design
  • Indicar
  • Impressora
  • Denunciar

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("
");
                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("
");
         // 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

Customizar o Lightdm (gerenciador de login do Ubuntu/Mint)

Usando o script alertaTwitter

Deixando o Debian com a cara do Ubuntu

Pino - um cliente para o Twitter

OpenOffice.org - copiar e colar texto e imagem da internet

Instalação do Aptana (Desevolvimento WEB)

Javascript - Criando galeria de imagens com "LIGTHBOX"

Substituto do dreamweaver

Para sempre VOL

Site com diversos emojis para seus códigos

Nenhum comentário foi encontrado.

Contribuir com comentário

Entre na sua conta para comentar.