Abrir modal do tuto do maujor, automaticamente ao carregar a página – jQuery
Bom, vira e mexe, alguém aparece no fórum perguntando, como fazer para o modal deste tutorial:
http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/,
abrir automaticamente, ao carregar a página.
Por esse motivo, estou criando este post, para deixar aqui, uma forma de fazer isso, e assim evitar que eu precise me repetir toda vez que alguém perguntar.
O primeiro passo, é encapsular a rotina em uma função:
function open_modal( id ){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }; $(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); open_modal( $(this).attr('href') ); }); $('.window .close').click(function (e) { e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });
Feito isso, tudo continua funcionamento normalmente.. assim como era.
E para abrir automaticamente, podemos chamar então essa função que criei:
open_modal( '#dialog' );
Ficando então, assim o código completo:
function open_modal( id ){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }; $(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); open_modal( $(this).attr('href') ); }); open_modal( '#dialog' );//abrindo o div#modal ao carregar a página $('.window .close').click(function (e) { e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });