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">×</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).
