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();
  });
});