10 Plugins de Janelas Modais Gratuitas

Você pode encontrar muitos modais CSS puros mas estes não ofereça o mesmo controle que o JavaScript. Com um modal JavaScript, você pode adicionar animações personalizadas, entradas de interface do usuário e realmente melhorar a experiência do usuário.

Mas, por que projetar algo do zero quando você pode usar uma biblioteca JS? Eu colecionei o melhores scripts modais livres de JavaScript aqui para você ler e destacar seus favoritos.

Todos estes são completamente livre e de código aberto, para que você possa editar o código e reestilá-lo para que ele se ajuste ao site, conforme necessário.

1. Tingle

Um dos meus scripts modais gratuitos favoritos é Tingle.js. Está construído em JavaScript vanilla sem dependências, então você não precisa de nenhuma biblioteca jQuery ou Zepto.

Além disso, é uma biblioteca relativamente pequena, embora tenha muitas opções para customização. Você pode alterar as transições CSS, as animações modais JavaScript e toda a experiência do usuário com apenas algumas configurações.

Tingle.js é projetado para ser totalmente acessível e responsivo, por isso funciona em dispositivos móveis e também suporta navegadores mais antigos.

Você pode ver toda a documentação no GitHub, junto com o código-fonte livre. Eles também têm um link de demonstração, para que você possa confira Tingle em ação para ver se poderia caber no seu site.

2. Modal Baunilha

Aqui está um modal que acabei de encontrar recentemente e é muito mais simples do que a maioria. Baunilha Modal permanece fiel ao seu nome com um roteiro de baunilha puro alimentando o modal, junto com Transições CSS.

Essa coisa é bem pequena e super flexível, com CSS personalizado para redesenhar as janelas. Ele também tem algumas opções que você pode alterar com JavaScript, tornando-o perfeito para executar funções DOM ou até mesmo funções de retorno.

Dê uma olhada no página de demonstração para ver o estilo padrão. É um design realmente básico, então vai Exigir personalizações para usá-lo em um site de produção. Mas isso também reduz o total de requisitos de código, por isso é uma das bibliotecas modais JavaScript mais finas.

3. plainModal

Se você quer um roteiro muito simples eu recomendo plainModal. Isto é construído em jQuery, mas é um dos menores scripts modais disponíveis.

Faz não use nenhum CSS externo ou arquivos de imagem. Apenas um único script JS é tudo que você precisa.

Uma vez que o script plainModal é adicionado à sua página, você apenas segmentar o botão modal e você é bom de ir. Isso lhe dá controle sobre a tela e quanto você quer alterar a interface modal.

Além disso, você pode configurar o modal com uma linha de JavaScript mantendo-se com o tema minimalista deste plugin.

4. Modaal

Não há como negar acessibilidade é enorme na web. O objetivo de cada designer deve ser um experiência mais inclusiva para pessoas em todo o mundo em vários dispositivos e com possíveis limitações.

Com Modaal, você obtém essa experiência perfeita que passa no teste WCAG 2.0 com uma classificação de acessibilidade AA sólida. Você pode ver um exemplo fantástico na página principal, junto com alguma documentação de código.

No geral, eu recomendo este plugin JavaScript vanilla para quem realmente se importa com acessibilidade. A classificação AA pode ser exigida em alguns projetos da web, então a Modaal é um roteiro muito útil para se manter marcado.

5. Scotch JS Modal

A equipe de desenvolvimento do Scotch.io publica tutoriais e guias para codificadores. O trabalho deles é incrível e realmente mostra este script modal em JavaScript, hospedado no Scotch GitHub.

O modal foi desenvolvido por Ken Wheeler e este script ainda tem um tutorial completo se você quiser aprender como funciona. No entanto, o código livre deve ser suficiente para a maioria dos desenvolvedores, já que super leve e fácil de configurar. Sem dependências e até mesmo uma amostra de demonstração no CodePen.

6. Bootbox.js

O caminho mais rápido para lançar um novo projeto da web é através do Bootstrap. É um poderoso framework frontend que encoraja os desenvolvedores a crie seus próprios complementos para a biblioteca.

Um exemplo é Bootbox.js, uma pequena biblioteca JavaScript, projetado exclusivamente para janelas modais em Bootstrap. Na verdade funciona em caixas de diálogo onde o usuário pode clicar em OK ou cancelar, com base em sua solicitação.

Diálogos de JavaScript típicos são terríveis, assim como caixas de alerta. O script de Bootbox oferece um Alternativa sólida para quem trabalha no ecossistema BS3 / BS4.

Mais uma vez, é totalmente livre e de código aberto, junto com um página de documentação demorada para te levantar e correr rápido.

7. iziModal.js

Se vocês precisa de uma solução um pouco mais personalizada Confira iziModal.js. Esta ferramenta é totalmente responsivo e projetado para trabalhar em todos os navegadores modernos perfeitamente.

Eu ainda tenho que encontrar outro script modal que oferece um design tão esteticamente agradável. Sai o portão com um UI linda que pode se misturar em praticamente qualquer site. No entanto, você pode também restyle o design para atender às suas necessidades.

Apenas observe este plugin funciona no jQuery, por isso é um dos poucos aqui que tem uma dependência. Mas, se você quiser os estilos iziModal, é um pequeno preço a pagar por essas elegantes janelas popover..

8. jQuery Modal

o Plugin jQuery Modal é talvez o script modal mais simples no jQuery você nunca vai encontrar.

Pode ser programado para ligar automaticamente com certos elementos HTML com base em vários atributos. Isso também suporta atalhos de teclado como ESC para fechar a janela.

No total, este plugin mede menos de 1KB e isso funciona em todos os navegadores possíveis que você pode imaginar. Os desenvolvedores do jQuery devem manter este plugin salvo para acesso rápido a um script modal simples sem os extras extras.

9. PicoModal

Voltando para baunilha JavaScript, temos o Biblioteca PicoModal. Este é provavelmente um dos menores scripts que você encontrará e foi projetado para funcionar perfeitamente em um backbone JavaScript baunilha.

isto suporta todos os navegadores modernos, incluindo navegadores móveis para Android e Mobile Safari para iOS. Ele ainda suporta navegadores antigos do IE, remontando ao IE7!

Desenvolvedor PicoModal criou um pequeno script JSfiddle para demonstrar como funciona. Este é um exemplo muito pequeno e é não vinculado a um evento de clique ou qualquer outra coisa, mas não é difícil script em alguns botões de alternância para executar essa janela restrita corretamente.

10. Avgrund

Avgrund é provavelmente um dos modais mais exclusivos desta lista. Ele usa um efeito de desvanecimento de página personalizado, juntamente com uma animação de encolhimento para trazer o modal à vista.

Nem todo mundo vai gostar dessa animação, então não posso dizer que esse script se encaixa em todos os sites. Mas é um Baunilha pura e é super fácil de configurar, com apenas um CSS e um arquivo JavaScripte.

Dê uma olhada no página de demonstração para ver como funciona. Certamente tem um estilo único e é obrigado a agarrar a atenção com as animações personalizadas que funcionam.

Palavras finais

Não importa o que você esteja procurando, aposto que há algo nessa lista para atender às suas necessidades. Mas, se você ainda não está satisfeito navegar pelo GitHub para scripts modais relacionados e veja o que mais você pode encontrar.