JQuery gerenciador de modal

Mexer com modal sempre foi uma tarefa bem pé no saco para mim, especialmente em projetos onde tem várias implementações diferentes espalhadas pelo código. Neste post vou compartilhar um gerenciador de modal que eu fiz utilizando JQuery e Bootstratp.

Hands On

Conteúdo

ExibirModal({
 CorpoModal: "Oi"
});

É possível passar conteúdo com HTML para a propriedade CorpoModal isso é muito útil quando você quiser um formulário dentro do modal

ExibirModal({
 CorpoModal: "<strong><i>Oi</i></strong>"
});

Cabeçalho

ExibirModal({
 TextoHeader: "Texto Cabeçalho Modal"
});

A propriedade TextoHeader aceita HTML o que permite você personalizar o cabeçalho do seu modal como bem entender

ExibirModal({
 TextoHeader: "<strong><i>Texto Cabeçalho Modal</i></strong>"
});

Largura e Altura

Defina a altura e largura do seu modal através da propriedades Largura e Altura

ExibirModal({
 Largura:"800px",
 Altura:"150px"
});

A propriedade FullWidth seta largura de 100% no seu modal

ExibirModal({
 FullWidth:true
});

Ocultar botão fechar

Oculte o botão Fechar do seu modal através da propriedade OcultarBotaoFechar

ExibirModal({
 OcultarBotaoFechar:true
});

Evento padrão

A propriedade EventoPadrao permite setar um comportamento padrão ao botão Fechar do modal

ExibirModal({
 EventoPadrao: function(){ 
       alert ("Evento Padrão");
  }
});

Adicionar botões

A propriedade Botao aceita um array de objetos isto significa que você pode adicionar quantos botões desejar ao seu modal, cada um com seus próprios eventos e configurações.

ExibirModal({
 Botao: [
        {
          Texto: "Salvar",
          Class: "red",
          FecharAposAcao: false,
          Evento: function(){
                    alert("Evento do botão");
          }
        }
    ]
});

Considerações finais

Este componente permite que você tenha até 4 modais sobrepostos! Para isso basta chamar o método ExibirModal consecutivamente.

Este gerenciador de modal é extremamente simples de usar. Coloque os Scripts, CSS e HTML, responsáveis pela manipulação do modal, em sua master page e poderá usá-lo em qualquer parte da sua aplicação!

Eu tenho usado este gerenciador de modal em vários dos meus projetos e a exibição de mensagens e formulários dentro de modais tornou-se extremamente mais simples de se fazer.

Faça o download do código e dos arquivos necessários para utilizar esse componente no nosso GitHub