Insira a classe ui_modal no elemento que será o gatilho do modal
Qualquer marcação (tag) pode ser usada como gatilho
Imediatamente após o gatilho, insira outro elemento com o conteúdo do modal
A função está preparada para esconder o conteúdo e só exibí-lo após acionar o gatilho
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
Como padrão, o conteúdo do modal está localizado após o gatilho. Veja como alterar essa padrão
Insira no gatilho o atributo data-obj e informe qual elemento possui o conteúdo do modal
Use valores notáveis, como prev para capturar o conteúdo do elemento anterior ao gatilho e next para o elemento posterior ao gatilho (padrão)
Também é possível informar o seletor do elemento que contém o conteúdo do modal, ex: data-obj=".minhaClass" ou data-obj="#meuId"
Independente do elemento que será o modal, a função ficará encarregada de escondê-lo para exibí-lo somente após o acionamento do gatilho
Por padrão, a altura e largura são flexíveis, ou seja elas se ajustam conforme o conteúdo.
Se o conteúdo for maior do que a área disponível na tela, o modal ganhará automaticamente barras de rolagem, sem que seja necessário nenhuma configuração adicional
Caso necessário, é possível determinar a largura e a altura do modal. Para isso, insira no gatilho os atributos data-width e data-height informando os valores desejados (em pixels), ex: data-width="400"data-height="200"
Os atributos são independentes, ou seja, é possível usar apenas um deles ou os dois juntos
Também é possível customizar o título do modal, veja como:
Coloque no gatilho o atributo data-title, ex: data-title="Minha Janela"
Antes da animação do modal, usuários avançados podem implementar funções do tipo callbefore e callback
Para isso, crie a função callbefore_modal(status) e/ou callback_modal(status) e implemente as ações que irão ocorrer antes/depois da animação
Onde status pode ser "open" ou "close" de acordo com a visibilidade da janela.
Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que os seus objetivos não são genéricos.
Há também a função callready_modal() entre o callbefore e callback quando o modal é aberto. A diferença entre o callready e callbefore é que o objeto do modal (todo o contâiner) já está pronto em callready.
Também é possível usar a função modal de modo isolado para abrir em eventos ou ações diversas
Para isso, use a função modal(title,elem,width,height)
Onde title é o título da janela e elem é o seletor do elemento que contém o texto, como "#meuElemento" ou ".meuElemento". Também pode ser uma string, indicando o texto do modal, como "Meu texto" ou um objeto, como $(objeto). Ambos (objeto e string), podem ser criados durante a própria chamada da função, exemplos: modal("Título","Hello World!") e modal("Título", $("<div/>").attr("id", "myId").html("<h1>Hello World!</h1>")). Ps: elem ainda poderá ser os valores notáveis "next" e "prev", mas não fará sentido se usado na função isolada modal(). elem só terá esses valores notáveis quando a função for acionado por meio do gatilho renderizado no html .ui_modal e opcionalmente algum data-obj.
width é a largura da janela, height é a altura da janela.
Para fechar o modal manualmente, use a função modalClose();
No uso isolado da função modal, fica a critério do usuário esconder ou exibir o elemento que contém o conteúdo do modal
A vantagem de usar a função isolada (ao invés de escrever outra função) é o vínculo com a Ui, como as chamadas callbefore e callback
Atenção: Para layouts responsivos, recomenda-se evitar o uso de data-width ou tratá-lo no callbefore. Outra opção viável ao não usar data-width é determinar a largura do elemento que contém o conteúdo do modal e usar media queries no css, exemplo: .meuElem{ width:800px; } @media all and (max-width: 800px) { .meuElem{ width:auto; } }
Elementos com conteúdos para modal que contenham outros recursos da Ui (principalmente aqueles recursos que desenham ou editam visualmente seus objetos, como carrossel ou aba), devem ter largura definida por meio de Css (igual ou menor a data-width do modal) para que possam ser renderizados da maneira correta antes do modal inclui-lo na janela (ou omitir a largura data-width do modal para que a janela se adeque ao novo recurso).
Também é recomendado esconder explicitamente, via Css (display:none), o elemento que contém o conteúdo do modal, caso outras funções criadas pelo usuário usem valores relacionados a altura desse elemento ou de seus ancestrais. Um erro pode ocorrer, pois o elemento que contém o conteúdo só será escondido depois que ele ficar pronto (ready). Equanto isso não acontece, uma função poderia capturar a sua dimensão (incluindo os seus ancestrais), uma vez que ele ainda se apresenta visível em tela. Outra alternativa para evitar este problema é retirar o elemento com o conteúdo do modal do container que terá a sua altura capturada, já que não importa a localização DOM do elemento que apenas cede o seu conteúdo para o modal.