Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Modal Download

? - +
Janela modal
  1. Insira a classe ui_modal no elemento que será o gatilho do modal
    • Qualquer marcação (tag) pode ser usada como gatilho
  2. 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:
  1. 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
  2. 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
  3. Também é possível customizar o título do modal, veja como:
    • Coloque no gatilho o atributo data-title, ex: data-title="Minha Janela"
  1. Antes da animação do modal, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_modal(status) e implemente as ações que irão ocorrer antes da animação
    • Onde status pode ser "opening" ou "closing" de acordo com a visibilidade da janela.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callbefore em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  2. Após a animação do modal, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_modal(status) e implemente as ações que irão ocorrer após a animação
    • Onde status pode ser "opened" ou "closed" de acordo com a visibilidade da janela.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. 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
    • elem é o seletor do elemento, como "#meuElemento" ou ".meuElemento" (também pode ser um objeto, como $(objeto))
    • 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
  4. 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; } }
  5. 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).
  6. 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.
Customizar


Padrão inicial

. Padrão: invisível (false)

Objeto que carrega o conteúdo do modal

O conteúdo do modal está no elemento . Padrâo: posterior (next)
...de e rótulo

Dessa forma, o elemento com o conteúdo do modal pode ficar em qualquer lugar do Html.

Largura e Altura

O modal terá pixels de largura e pixels de altura. Padrâo: vazio (flexível)

Rótulo do modal

O título no topo da janela será .
Abra o modal para ler o novo título

Tipo do gatilho

A marcação do gatilho será .
Saiba mais
Qualquer marcação (tag) pode ser usada como gatilho, como:
  • links (<a>)
  • botão (<button>)
  • inputs (<input type="button">, <input type="submit">, etc.)
  • parágrafos (<p>)
  • Dentre outros.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Modal