Criando modal do Twitter Bootstrap dinamicamente

O Twitter Bootstrap é mesmo uma mão na roda para os desenvolvedores web - principalmente aqueles que não desejam (ou simplesmente não querem) investir muito tempo em estilização do CSS. Ainda assim, o framework apresenta algumas "dificuldades".

Uma delas, ao meu ver, é com relação ao modal (um dialog padrão bem mais elegante que o proposto pelo jQuery UI). Em contraponto, a caixinha do Bootstrap peca por ser difícil de ser implementada: ao contrário do dialog do jQuery que utiliza um método em JavaScript bem simples, a opção do Bootstrap exige que se trabalhe na personalização do HTML. Ou seja, caso você queira implementar, digamos, 20 modals na sua aplicação, terá que fazer um Ctrl+C e Ctrl+V do HTML mais a edição umas 20 vezes. Assim, desenvolvi um pequeno método em jQuery para criar modals do Bootstrap dinamicamente.

A ideia é parecida com o método do jQuery: passar um objeto com os valores desejados para a implementação do modal e criá-lo em cima de um HTML básico.

O HTML usado é o seguinte:

 <div id="modal-default" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModal" >  
  <div class="modal-dialog">  
   <div class="modal-content">  
    <div class="modal-header">  
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
     <h4 class="modal-title" id="myModal"></h4>  
    </div>  
    <div class="modal-body">  
    </div>  
    <div class="modal-footer">  
    </div>  
   </div>  
   </div>  
 </div>  

Já o método é o apresentado abaixo:

 function build_modal(opt) {  
   var $this = $("#modal-default");  
   if ( opt.is_small ) {  
     $this.find(".modal-dialog").removeClass("modal-lg").addClass("modal-sm");  
   } else if ( opt.is_large ) {  
     $this.find(".modal-dialog").removeClass("modal-sm").addClass("modal-lg");  
   } else {  
     $this.find(".modal-dialog").removeClass("modal-sm").removeClass("modal-lg");  
   }  
   $this.find(".modal-title").html(opt.title);  
   $this.find(".modal-body").html(opt.body);  
   if ( opt.button != undefined ) {  
     var include_buttons = "";  
     for ( var i in opt.button ) {  
       console.log(opt.button[i]);  
       include_buttons += '<button type="button" class="btn ' + opt.button[i].type + '"';  
       if ( opt.button[i].onclick ) {  
         include_buttons += ' onclick="' + opt.button[i].onclick + '"';  
       }  
       if ( opt.button[i].close_button ) {  
         include_buttons += ' data-dismiss="modal"';  
       }  
       include_buttons += '>' + opt.button[i].text + '</button>';  
     }  
     $this.find(".modal-footer").css("display", "block").html(include_buttons);  
   } else {  
     $this.find(".modal-footer").css("display", "none");  
   }  
   $this.modal();  
 }  

Na sequência, apresento um exemplo de como pode ser o objeto enviado para o build_modal. O modal proposto continua trabalhando com a largura padrão proposta pelo Bootstrap, mas é possível alterar isso setando 'is_small' ou 'is_large' como verdadeiro.

O título desejado vai em title e o corpo do modal vai em body. Nesse caso, o valor pode ser tanto uma string com o HTML quanto um nó da DOM.

O modal pode ter um ou mais botões, como também pode não ter nenhum - fechando com um click fora. Indique o close_button como true para incluir o atributo data-dismiss no botão - necessário para fechar o modal com um clique. Um ponto a ser trabalho é a associação de métodos ao clique de um botão do modal. No meu exemplo, já é necessário ter uma função em algum arquivo para ligar ao atributo onclick, mas seria interessante implementar já a função direto no click, como no dialog do jQuery.

 build_modal({  
   title: 'Teste do modal',  
   is_large: true,  
   body: '<p>O modal está em perfeito estado?</p>', //pode ser também $("#corpo_modal") por exemplo 
   buttons: [  
     {  
       text: "Cancel",  
       type: "btn-default",  
       close_button: true  
     },  
     {  
       text: "Sim",  
       type: "btn-success",  
       onclick: "set_method_as_top()"  
     }  
   ]  
 });  

O resultado é esse:

Aqui vai um fiddler para quem quiser testar na prática.


Então é isso. Comentem apontando críticas ou sugestões.
(Atualizado às 15h17 (horário de Manaus), do dia 28 de agosto, para incluir atributo em botão para fechar o modal e corrigir onclick).