{"id":5213,"date":"2016-11-17T12:14:24","date_gmt":"2016-11-17T14:14:24","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=5213"},"modified":"2019-03-26T11:44:35","modified_gmt":"2019-03-26T14:44:35","slug":"7-scripts-de-modais-jquery-para-implementar-seus-sites","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/7-scripts-de-modais-jquery-para-implementar-seus-sites\/","title":{"rendered":"7 Scripts de Modais jQuery para implementar seus sites"},"content":{"rendered":"

Os Modais jQuery<\/strong> trouxeram modernidade, flexibilidade e otimiza\u00e7\u00e3o aos projetos web. \u00c9 uma vers\u00e3o mais moderna dos antigos popup’s HTML.<\/p>\n

Com o recurso de bloqueio de popup’s dos navegadores mais recentes, o uso de Modais em jQuery<\/strong> virou febre e uma solu\u00e7\u00e3o bastante eficaz.<\/p>\n

Os modais s\u00e3o janelas ou di\u00e1logos que explodem em seu site de acordo com determinada a\u00e7\u00e3o que v\u00e3o desde o envio de uma requisi\u00e7\u00e3o atrav\u00e9s de um bot\u00e3o, um load da p\u00e1gina ou at\u00e9 mesmo clique em um link ou imagem.<\/p>\n

Neste artigo listarei 7 Modais jQuery<\/strong>\u00a0bonitos e modernos que dar\u00e3o um charme a mais em seus projetos.<\/p>\n

Continue lendo.<\/p>\n

1. Vex<\/a><\/h2>\n

\"Vex<\/p>\n

Este Script pode ser facilmente estilizado e configurado. O Vex \u00e9 um modal incr\u00edvel e f\u00e1cil de usar. O bacana deste script \u00e9 que voc\u00ea pode adapt\u00e1-lo facilmente a seus projetos sem ter problemas de conflitos com outros scripts, bibliotecas ou plugins.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

2. animatedModal.js<\/a><\/h2>\n

\"AnimatedModal.js<\/p>\n

Trata-se de um plugin jQuery que cria um modal em tela cheia com transi\u00e7\u00f5es em CSS3. Voc\u00ea pode usar as transi\u00e7\u00f5es do animate.css<\/a> ou criar suas pr\u00f3prias transi\u00e7\u00f5es.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

3. Remodal<\/a><\/h2>\n

\"Remodal<\/p>\n

O Remodal \u00e9 um script de modal que usa um plugin \u00e1gil, leve e totalmente personaliz\u00e1vel com configura\u00e7\u00f5es intuitivas e rastreamento de rash. Tem suporte a IE8 e permite configurar itens do BackGround.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

4. Avgrund Modal<\/a><\/h2>\n

\"Avgrund<\/p>\n

Procurando algo diferente? Avgrund pode ser a solu\u00e7\u00e3o! As configura\u00e7\u00f5es padr\u00f5es criam um efeito \u00fanico que n\u00e3o s\u00f3 acrescentam anima\u00e7\u00f5es no modal, mas tamb\u00e9m \u00e0 pr\u00f3pria p\u00e1gina criando uma ilus\u00e3o de profundidade bastante elegante.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

5. jQuery Popdown<\/a><\/h2>\n

\"jQuery<\/p>\n

Este script padr\u00e3o do jQuery Popdown \u00e9 simples e bonito e permite total customiza\u00e7\u00e3o para se adequar aos seus projetos.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

6. Di\u00e1logo Zebra<\/a><\/h2>\n

\"Modal<\/p>\n

O tema padr\u00e3o em “Zebra” \u00e9 fant\u00e1stico neste script de Modal jQuery. Permite ainda a possibilidade de personaliza\u00e7\u00e3o para se adequar aos seus projetos.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

7. SweetAlert<\/a><\/h2>\n

\"SweetAlert<\/p>\n

SweetAlert \u00e9 outro script de Modal incr\u00edvel. Ele possui um efeito incr\u00edvel ao aparecer e possui um design minimalista e flat al\u00e9m de trazer \u00edcones animados.<\/p>\n

Mais informa\u00e7\u00f5es<\/a><\/strong><\/p>\n

Ver exemplo Online<\/a><\/strong><\/p>\n

Dica:<\/strong> Quer se especializar ou potencializar seus conhecimentos em Desenvolvimento Front-End e dominar tecnologias e linguagens como HTML5, CSS3, Javascript, jQuery, Bootstrap, entre outros? Conhe\u00e7a nossos cursos online<\/a> e decole sua carreira.<\/p>\n

E a\u00ed, gostou da lista? Deixe seu coment\u00e1rio e compartilhe com seus amigos.<\/p>\n

Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"

Os Modais jQuery trouxeram modernidade, flexibilidade e otimiza\u00e7\u00e3o aos projetos web. \u00c9 uma vers\u00e3o mais moderna dos antigos popup’s HTML. Com o recurso de bloqueio de popup’s dos navegadores mais recentes, o uso de Modais em jQuery virou febre e uma solu\u00e7\u00e3o bastante eficaz. Os modais s\u00e3o janelas ou di\u00e1logos que explodem em seu site […]<\/p>\n","protected":false},"author":83,"featured_media":18862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1233,1232,1276],"class_list":["post-5213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-javascript","tag-jquery","tag-modal"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=5213"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18862"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=5213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=5213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=5213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}