Dialog Box em JavaScript

02:19 in JavaScript

Vasculhando pela net procurando um esquema de Dialog Box em JavaScript, para criar alguns efeitos mais iterativos, encontrei nessa página
http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/
um esquema de Dialog Box bem simples e funcional, testando e aprovado, é bem simples de editar, o código não é dificil de se alterar, pois está bem escrito.

Ele funciona com um serie de divs que vc pode criar ou deixar ele criar dinamicamente, lógico que quando ele cria dinamicamente as box elas so contem mensagens de texto. Mas você pode editar isso. Basta criar os divs.

O Arquivo (dialog_box.js) vem escrito por padrão com somente duas opções, ou você deixa ele criar tudo, ou você cria todos os divs, que por padrão devem ter os ids
'dialog', 'dialog-header', 'dialog-title', 'dialog-close', 'dialog-content', 'dialog-mask'.

Como podem ver são bastantinhos divs a serem criados, e eu como sou meio vadio para essas coisas prefiro so criar um, o 'dialog-content', que é o dialog que contem o conteudo da janela.

uma simples edição no JavaScript pode resolver isso.
Na função
function showDialog

deve se procurar pela linha
if(!document.getElementById('dialog')) {

e aonde procurar dentro deste if uma definição do conteudo
dialogcontent = document.createElement('div');
antes dessa linha basta criar uma condição para ele não criar o elemento e sim utilizar o div que criariamos na pagina, lembrando que o div alem do id=content-dialog deve ter style="visibily: hidden".
Adicionamos então o seguinte código

if(! document.getElementById('div-content')){
//Aqui vai o código que ja tinha no arquivo
dialogcontent = docum...
}else{
dialogcontent = document.getElementById('div-content');
}

e por ultimo mas não menos importante basta comentar a seguinte linha
dialogcontent.innerHTML = message;

agora sim, a função showDialog se encontrar um div com o id= div-content, vai pegar esse div e todo seu conteudo e mostrar na janela do tipo que foi escolhido.

Caso não esteja claro, podem perguntar nos comentarios, qualquer coisa disponibilizo o arquivo editado para download.

[]'s
até a proxima