{"id":3542,"date":"2019-07-15T05:18:08","date_gmt":"2019-07-15T05:18:08","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3542"},"modified":"2024-01-09T07:08:23","modified_gmt":"2024-01-09T10:08:23","slug":"modal-bootstrap","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/","title":{"rendered":"Modal Bootstrap : um guia b\u00e1sico (com tutorial)"},"content":{"rendered":"<p>Neste artigo, falaremos sobre o uso de modal Bootstrap. Bootstrap \u00e9 um framework gratuito para o desenvolvimento de componentes de interface web front-end baseado em HTML, CSS e JavaScript. Com o intuito de melhorar a compreens\u00e3o, trabalharemos com modelos-tutoriais. Para este exemplo, vamos usar a vers\u00e3o 4.3 do Bootstrap, a mais atual no momento da cria\u00e7\u00e3o deste artigo.<\/p>\n<p>T\u00f3picos deste artigo:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico1\">C\u00f3digo fonte de um modal Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico2\">O que \u00e9 um modal?<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico3\">Para que serve um modal?<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico4\">Conectando a p\u00e1gina ao Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico5\">Criando um modal Bootstrap b\u00e1sico<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico6\">Organizando o modal Bootstrap (cabe\u00e7alho, corpo e rodap\u00e9)<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#topico7\">Como aprofundar os seus conhecimentos em modal Bootstrap<\/a><\/li>\n<\/ul>\n<h2>Clique no bot\u00e3o abaixo para ver como funciona o nosso modal Bootstrap:<\/h2>\n<div style=\"width: 100%; text-align: center;\"><!-- Bot\u00e3o que ir\u00e1 abrir o modal --><br \/>\n<button class=\"btn btn-success btn-lg mt-2 ml-2\" type=\"button\" data-toggle=\"modal\" data-target=\"#meuModal\">Abrir Modal<\/button><\/div>\n<p><!-- Modal --><\/p>\n<div id=\"meuModal\" class=\"modal fade\" role=\"dialog\">\n<div class=\"modal-dialog\">\n<p><!-- Conte\u00fado do modal--><\/p>\n<div class=\"modal-content\">\n<p><!-- Cabe\u00e7alho do modal --><\/p>\n<div class=\"modal-header\">\n<h4 class=\"modal-title\">T\u00edtulo do modal<\/h4>\n<p><button class=\"close\" type=\"button\" data-dismiss=\"modal\">\u00d7<\/button><\/p>\n<\/div>\n<p><!-- Corpo do modal --><\/p>\n<div class=\"modal-body\">\n<p>Conte\u00fado no corpo do modal.<\/p>\n<p>Aqui voc\u00ea pode inserir todo o conte\u00fado necess\u00e1rio.<\/p>\n<\/div>\n<p><!-- Rodap\u00e9 do modal--><\/p>\n<div class=\"modal-footer\"><button class=\"btn btn-danger\" type=\"button\" data-dismiss=\"modal\">Fechar<\/button><br \/>\n<button class=\"btn btn-primary\" type=\"button\">Salvar Altera\u00e7\u00f5es<\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><a name=\"topico1\"><\/a><\/p>\n<h2>C\u00f3digo fonte de um modal Bootstrap<\/h2>\n<p>A seguir, o c\u00f3digo do nosso bot\u00e3o e modal Boostrap por completo em sua vers\u00e3o final:<\/p>\n<pre class=\"wrap:true lang:default decode:true\">&lt;html lang=\"pt-br\"&gt;\n  &lt;head&gt;\n\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"&gt;\n\n    &lt;title&gt;Modal em Bootstrap | HomeHost&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;!-- Bot\u00e3o que ir\u00e1 abrir o modal --&gt;\n    &lt;button type=\"button\" class=\"btn btn-success btn-lg mt-2 ml-2\" data-toggle=\"modal\" data-target=\"#meuModal\"&gt;Abrir Modal&lt;\/button&gt;\n\n    &lt;!-- Modal --&gt;\n    &lt;div id=\"meuModal\" class=\"modal fade\" role=\"dialog\"&gt;\n      &lt;div class=\"modal-dialog\"&gt;\n\n        &lt;!-- Conte\u00fado do modal--&gt;\n        &lt;div class=\"modal-content\"&gt;\n\n          &lt;!-- Cabe\u00e7alho do modal --&gt;\n          &lt;div class=\"modal-header\"&gt;\n            &lt;h4 class=\"modal-title\"&gt;T\u00edtulo do modal&lt;\/h4&gt;\n            &lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\"&gt;&amp;times;&lt;\/button&gt;\n          &lt;\/div&gt;\n\n          &lt;!-- Corpo do modal --&gt;\n          &lt;div class=\"modal-body\"&gt;\n            &lt;p&gt;Conte\u00fado no corpo do modal.&lt;\/p&gt;\n            &lt;p&gt;Aqui voc\u00ea pode inserir todo o conte\u00fado necess\u00e1rio.&lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;!-- Rodap\u00e9 do modal--&gt;\n          &lt;div class=\"modal-footer\"&gt;\n            &lt;button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\"&gt;Fechar&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"btn btn-primary\"&gt;Salvar Altera\u00e7\u00f5es&lt;\/button&gt;\n          &lt;\/div&gt;\n\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- Optional JavaScript --&gt;\n    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><a name=\"topico2\"><\/a><\/p>\n<h2>O que \u00e9 um modal?<\/h2>\n<p>Antes de tudo, <em>modal<\/em> \u00e9 basicamente uma janela que abre sobre o conte\u00fado da p\u00e1gina sem se desfazer dele. \u00c9 utilizado com o intuito de passar algum aviso ou informa\u00e7\u00e3o extra para dar suporte ao conte\u00fado da p\u00e1gina principal, por isso n\u00e3o se desfaz deste mesmo conte\u00fado.<br \/>\n<a name=\"topico3\"><\/a><\/p>\n<h2>Para que serve um modal?<\/h2>\n<p>Imagine, por exemplo, que uma loja online (e-commerce) disponibiliza uma lista de produtos com nome, \u00a0foto e uma descri\u00e7\u00e3o b\u00e1sica para cada produto. O site deve disponibilizar uma boa experi\u00eancia ao usu\u00e1rio e ao mesmo tempo informa\u00e7\u00e3o detalhada sobre o produto. Assim os desenvolvedores dessa loja online teriam basicamente duas op\u00e7\u00f5es (n\u00e3o fossem os modais):<\/p>\n<p>1 \u2013 Incluir toda a informa\u00e7\u00e3o sobre cada produto na p\u00e1gina em que eles\u00a0s\u00e3o listados. Aqui a p\u00e1gina ficaria enorme e o visitante seria for\u00e7ado a ver informa\u00e7\u00f5es sobre produtos que n\u00e3o tem interesse e sequer cogita comprar. A polui\u00e7\u00e3o visual seria de alto impacto nesse modelo; ou<\/p>\n<p>2 \u2013 Cada vez que o cliente quiser mais detalhes sobre um produto, ser\u00e1 levado a outra <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\">p\u00e1gina onde imagens<\/a>, textos e scripts ser\u00e3o carregados. Neste modelo, o cliente que est\u00e1 pesquisando diversos produtos dever\u00e1 navegar entre diversas p\u00e1ginas, o que consome mais tempo e banda (cada p\u00e1gina aberta implica em uma grande quantidade de dados a serem carregados), prejudicando a experi\u00eancia.<\/p>\n<p>Para isso (al\u00e9m de outros usos) existe o modal Bootstrap. No nosso exemplo, cada vez que o cliente clicar em \u201cSaiba mais\u201d sobre um produto, a p\u00e1gina em que se encontra simplesmente ficar\u00e1 por tr\u00e1s de um \u201cpop-up\u201d com novo conte\u00fado, fornecendo mais detalhes sobre o produto espec\u00edfico. Ao fechar o modal, o cliente simplesmente continua navegando na lista de produtos que n\u00e3o precisa ser carregada novamente.<br \/>\n<a name=\"topico4\"><\/a><\/p>\n<h2>Conectando a p\u00e1gina ao Bootstrap<\/h2>\n<p><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\">Para criar<\/a> um modal em Bootstrap, antes precisamos incluir Bootstrap \u00e0 nossa p\u00e1gina. Caso n\u00e3o saiba como faz\u00ea-lo, pode simplesmente copiar o modelo padr\u00e3o b\u00e1sico fornecido pelo pr\u00f3prio Bootstrap em seu site oficial (em ingl\u00eas) clicando <a href=\"https:\/\/getbootstrap.com\/docs\/4.3\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqui<\/a>.<\/p>\n<p>Dessa maneira, iniciaremos incluindo um elemento\u00a0<em>&lt;link&gt;<\/em> dentro do nosso\u00a0<em>&lt;head&gt;<\/em> para conectar o CSS:<\/p>\n<pre class=\"wrap:true lang:xhtml decode:true\">  &lt;head&gt;\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"&gt;\n    &lt;title&gt;Modal em Bootstrap | HomeHost&lt;\/title&gt;\n  &lt;\/head&gt;<\/pre>\n<p>A seguir, algumas linhas ser\u00e3o necess\u00e1rias antes do fechamento do\u00a0<em>&lt;body&gt;<\/em>, aqui estaremos trazendo scripts utilizados pelo Bootstrap (o que permite alterar n\u00e3o apenas o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilo<\/a> mas tamb\u00e9m manipular elementos na nossa p\u00e1gina):<\/p>\n<pre class=\"wrap:true lang:xhtml decode:true\">  &lt;body&gt;\n\n    &lt;!-- Optional JavaScript --&gt;\n    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;<\/pre>\n<p>Com isso, a nossa p\u00e1gina estar\u00e1 configurada para utilizar Bootstrap e podemos agora criar elementos com propriedades e classes espec\u00edficas como as que utilizaremos para o nosso modal Bootstrap.<br \/>\n<a name=\"topico5\"><\/a><\/p>\n<h2>Criando um modal Bootstrap b\u00e1sico<\/h2>\n<p>No corpo da p\u00e1gina, logo ap\u00f3s abrir a tag <i>&lt;body&gt;<\/i>, vamos inserir o c\u00f3digo que criar\u00e1 o bot\u00e3o que servir\u00e1 como gatilho (<i>trigger<\/i>) para o nosso modal.<\/p>\n<pre class=\"lang:default decode:true\">    &lt;!-- Bot\u00e3o que ir\u00e1 abrir o modal --&gt;\n    &lt;button type=\"button\" class=\"btn btn-success btn-lg mt-2 ml-2\" \n     data-toggle=\"modal\" data-target=\"#meuModal\"&gt;Abrir Modal&lt;\/button&gt;<\/pre>\n<p>Para que possamos utilizar um modal sem precisar escrever sequer uma linha de c\u00f3digo <em>JavaScript<\/em>, utilizamos a propriedade <i>data-toggle<\/i> com o valor <i>modal<\/i> em algum elemento de controle (como, no nosso caso, um bot\u00e3o) e o Bootstrap ir\u00e1 cuidar dessa funcionalidade para n\u00f3s.<\/p>\n<p>Vamos utilizar tamb\u00e9m a propriedade <i>data-target<\/i> para indicar o \u201calvo\u201d do nosso bot\u00e3o. Assim, o Bootstrap sabe que modal abrir e fechar para o bot\u00e3o espec\u00edfico. Da mesma forma, as classes que n\u00e3o mencionamos s\u00e3o para especifica\u00e7\u00f5es no design, o que n\u00e3o \u00e9 o foco deste tutorial. Nosso bot\u00e3o dever\u00e1 estar assim:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-3680 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/1-botao-modal.png\" alt=\"O nosso bot\u00e3o dever\u00e1 parecer assim\" width=\"304\" height=\"132\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/1-botao-modal.png 304w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/1-botao-modal-300x130.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/1-botao-modal-1x1.png 1w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/p>\n<p>A seguir, criamos um <i>&lt;div&gt;<\/i> com a classe <i>modal<\/i> e com o <i>id<\/i><i>meuModal<\/i> (podemos dar o <i>id<\/i> que quisermos contanto que seja o mesmo no <i>data-target<\/i> do bot\u00e3o) e dentro deste primeiro <i>&lt;div&gt;<\/i> um outro com a classe <i>modal-dialog<\/i> (sem a qual, n\u00e3o haver\u00e1 o design de uma janela pop-up).<\/p>\n<pre class=\"lang:default decode:true \">    &lt;!-- Modal --&gt;\n    &lt;div id=\"meuModal\" class=\"modal fade\" role=\"dialog\"&gt;\n      &lt;div class=\"modal-dialog\"&gt;\n        [... estrutura b\u00e1sica do modal ...]\n      &lt;\/div&gt;\n    &lt;\/div&gt;<\/pre>\n<p>Conforme podemos observar no c\u00f3digo acima, ainda adicionamos uma classe <i>fade<\/i> ao <i>modal<\/i>. Isso serve apenas para aprimorar a experi\u00eancia, dando um efeito ao surgimento do modal, que n\u00e3o ir\u00e1 aparecer de vez, mas abrir e fechar lentamente. Remover a classe <i>fade<\/i> n\u00e3o influenciar\u00e1 no funcionamento do modal, apenas na experi\u00eancia do usu\u00e1rio (<i>user experience<\/i>).<\/p>\n<p>Seguindo, criaremos dentro do <i>&lt;div&gt;<\/i>\u00a0com a classe <i>modal-dialog<\/i> um outro <i>&lt;div&gt;<\/i> com a classe <i>modal-content<\/i>. Do ingl\u00eas, <i>content<\/i> significa <i>conte\u00fado<\/i>, e \u00e9 aqui que o conte\u00fado do nosso modal ser\u00e1 inclu\u00eddo. O nosso c\u00f3digo dever\u00e1 ficar assim:<\/p>\n<pre class=\"lang:default decode:true \">        &lt;!-- Conte\u00fado do modal--&gt;\n        &lt;div class=\"modal-content\"&gt;\n\n          &lt;h1&gt;Ol\u00e1, mundo!&lt;\/h1&gt;\n\n        &lt;\/div&gt;<\/pre>\n<p>Agora, ao clicarmos no nosso bot\u00e3o para o modal Bootstrap, deveremos ver algo como:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-large wp-image-3682 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/2-ola-mundo-1024x214.png\" alt=\"Modal Bootstrap b\u00e1sico sem estrutura (cabe\u00e7alho, corpo e rodap\u00e9)\" width=\"660\" height=\"138\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/2-ola-mundo.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/2-ola-mundo-300x63.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/2-ola-mundo-768x161.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/2-ola-mundo-1x1.png 1w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><a name=\"topico6\"><\/a><\/p>\n<h2>Organizando o modal Bootstrap<\/h2>\n<p>Podemos concordar que o nosso modal Bootstrap n\u00e3o est\u00e1 o mais bonito de todos, n\u00e3o \u00e9 mesmo? Por isso o Bootstrap foi criado, para facilitar o processo, neste caso, de cria\u00e7\u00e3o do nosso modal. Veremos a seguir como melhor estruturar o nosso modal Bootstrap.<\/p>\n<p>Assim como uma p\u00e1gina cont\u00e9m cabe\u00e7alho, corpo e rodap\u00e9, um modal Bootstrap tem os mesmos elementos. Para isso, dentro do nosso <i>&lt;div&gt;<\/i> com classe <i>modal-content<\/i>, criaremos 3 outros elementos <i>&lt;div&gt;<\/i>, um com classe <i>modal-header<\/i> (cabe\u00e7alho), um com <i>modal-body<\/i> (corpo do modal) e o terceiro com a classe <i>modal-footer<\/i> (rodap\u00e9).<\/p>\n<h3>Cabe\u00e7alho do modal Boostrap<\/h3>\n<p>A t\u00edtulo de exemplifica\u00e7\u00e3o e para aprimorar o resultado final, vamos inserir um conte\u00fado inicial b\u00e1sico:<\/p>\n<pre class=\"lang:default decode:true\">          &lt;!-- Cabe\u00e7alho do modal --&gt;\n          &lt;div class=\"modal-header\"&gt;\n            &lt;h4 class=\"modal-title\"&gt;T\u00edtulo do modal&lt;\/h4&gt;\n            &lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\"&gt;&amp;times;&lt;\/button&gt;\n          &lt;\/div&gt;<\/pre>\n<p>Al\u00e9m disso, temos um bot\u00e3o com <i>&amp;times;<\/i> que nada mais \u00e9 do que o <a href=\"https:\/\/www.ascii.cl\/htmlcodes.htm\" target=\"_blank\" rel=\"noopener noreferrer\">nome HTML<\/a> para o s\u00edmbolo de multiplica\u00e7\u00e3o, ou seja, o <i>X<\/i> que tamb\u00e9m utilizamos como s\u00edmbolo de fechar. \u00c9 necess\u00e1rio usar aqui a propriedade <i>data-dismiss=&#8221;modal&#8221;<\/i>, pois \u00e9 o que indica que esse bot\u00e3o fechar\u00e1 o nosso modal Bootstrap.A classe <i>modal-title<\/i> no nosso elemento <i>&lt;h4&gt;<\/i> \u00e9 uma classe de estilo que o Bootstrap usa para manipular os t\u00edtulos dos modais. Remover essa classe n\u00e3o ir\u00e1 impedir o modal Bootstrap de funcionar, mas trar\u00e1 uma leve altera\u00e7\u00e3o no design.<\/p>\n<h3>Corpo e rodap\u00e9 do modal Bootstrap<\/h3>\n<p>Continuando com os dois elementos <i>&lt;div&gt;<\/i> seguintes, teremos:<\/p>\n<pre class=\"lang:default decode:true \">          &lt;!-- Corpo do modal --&gt;\n          &lt;div class=\"modal-body\"&gt;\n            &lt;p&gt;Conte\u00fado no corpo do modal.&lt;\/p&gt;\n            &lt;p&gt;Aqui voc\u00ea pode inserir todo o conte\u00fado necess\u00e1rio.&lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;!-- Rodap\u00e9 do modal--&gt;\n          &lt;div class=\"modal-footer\"&gt;\n            &lt;button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\"&gt;Fechar&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"btn btn-primary\"&gt;Salvar Altera\u00e7\u00f5es&lt;\/button&gt;\n          &lt;\/div&gt;<\/pre>\n<p>Cada <i>&lt;div&gt;<\/i> que <a href=\"https:\/\/www.homehost.com.br\/blog\/contas-de-email\/visitantes-do-meu-site-podem-criar-e-mails-por-conta-propria\/\">criamos aqui pode conter<\/a> uma enorme quantidade de conte\u00fado. S\u00f3 para exemplificar, adicionamos dois par\u00e1grafos no corpo do nosso modal Bootstrap. Para aprender mais sobre cria\u00e7\u00e3o de sites e outros temas web, <a href=\"https:\/\/www.homehost.com.br\/blog\/category\/tutoriais\/\" target=\"_blank\" rel=\"noopener noreferrer\">visite nossa se\u00e7\u00e3o de tutoriais<\/a>.<\/p>\n<p>Com o fim de criar um design b\u00e1sico bastante limpo e bonito, inserimos dois bot\u00f5es no rodap\u00e9 do nosso modal Bootstrap. Em suma, as classes <i>btn-primary<\/i> e <i>btn-danger<\/i> s\u00e3o apenas classes b\u00e1sicas de estilo no Bootstrap. Para testar outros estilos, sugerimos que veja a <a href=\"https:\/\/getbootstrap.com\/docs\/4.3\/components\/buttons\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o Bootstrap<\/a> (em ingl\u00eas).<\/p>\n<p>Agora, ao clicarmos no nosso bot\u00e3o, teremos uma janela com cabe\u00e7alho, corpo e rodap\u00e9:<\/p>\n<p><img decoding=\"async\" class=\"size-large wp-image-3684 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico-1024x319.png\" alt=\"\" width=\"660\" height=\"206\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico-1024x319.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico-300x93.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico-768x239.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico-1x1.png 1w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-modal-basico.png 1998w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><br \/>\n<a name=\"topico7\"><\/a><\/p>\n<h2>Aprofundando seus conhecimentos em modal Bootstrap<\/h2>\n<p>Com a finalidade de tornar o processo de cria\u00e7\u00e3o mais f\u00e1cil, Bootstrap fornece uma enorme quantidade de op\u00e7\u00f5es de design e caracter\u00edsticas no uso de modal. Uma vez que a nossa proposta \u00e9 oferecer um tutorial b\u00e1sico, sugerimos visitar a <a href=\"https:\/\/getbootstrap.com\/docs\/4.3\/components\/modal\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial do Bootstrap<\/a> para aprofundar seus conhecimentos (e testar novas op\u00e7\u00f5es) em modal Bootstrap. Al\u00e9m disso, para aprender mais sobre hospedagem, design, desenvolvimento e outros temas web, visite <a href=\"https:\/\/www.homehost.com.br\/blog\/category\/tutoriais\/\" target=\"_blank\" rel=\"noopener noreferrer\">nossa p\u00e1gina de tutoriais<\/a>.<\/p>\n<p>E lembre-se: para que o mundo possa ver o seu modal Bootstrap, ser\u00e1 necess\u00e1rio hospedar a sua p\u00e1gina na internet. Na <a href=\"https:\/\/www.homehost.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\">HomeHost<\/a> temos as melhores op\u00e7\u00f5es para clientes de todos os tamanhos. <a href=\"https:\/\/www.homehost.com.br\/hospedagem-de-sites\" target=\"_blank\" rel=\"noopener noreferrer\">Verifique nossos planos de hospedagem<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, falaremos sobre o uso de modal Bootstrap. Bootstrap \u00e9 um framework gratuito para o desenvolvimento de componentes de interface web front-end baseado em HTML, CSS e JavaScript. Com o intuito de melhorar a compreens\u00e3o, trabalharemos com modelos-tutoriais. Para este exemplo, vamos usar a vers\u00e3o 4.3 do Bootstrap, a mais atual no momento da [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[2781,2782,2783,2780],"class_list":["post-3542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-bootstrap","tag-botao","tag-ecommerce","tag-modal-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost<\/title>\n<meta name=\"description\" content=\"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost\" \/>\n<meta property=\"og:description\" content=\"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T05:18:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:08:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1998\" \/>\n\t<meta property=\"og:image:height\" content=\"622\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/\",\"name\":\"Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png\",\"datePublished\":\"2019-07-15T05:18:08+00:00\",\"dateModified\":\"2024-01-09T10:08:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4\"},\"description\":\"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png\",\"width\":1998,\"height\":622,\"caption\":\"Modal Bootstrap b\u00e1sico com estrutura (cabe\u00e7alho, corpo e rodap\u00e9)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modal Bootstrap : um guia b\u00e1sico (com tutorial)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4\",\"name\":\"Gustavo Gallas\",\"description\":\"Analista de sistemas, formado pela PUC-Rio. Programador, gestor de redes e diretor da empresa Homehost. Pai do B\u00f3ris, seu pet de estima\u00e7\u00e3o. Gosta de rock'n'roll, cerveja artesanal e de escrever sobre assuntos t\u00e9cnicos. Contato: gustavo.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost","description":"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/","og_locale":"pt_BR","og_type":"article","og_title":"Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost","og_description":"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-07-15T05:18:08+00:00","article_modified_time":"2024-01-09T10:08:23+00:00","og_image":[{"width":1998,"height":622,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png","type":"image\/png"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Gustavo Gallas","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/","name":"Modal Bootstrap : um guia b\u00e1sico (com tutorial) | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png","datePublished":"2019-07-15T05:18:08+00:00","dateModified":"2024-01-09T10:08:23+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4"},"description":"Aprenda o que \u00e9 e como criar um modal Bootstrap e aprimore a experi\u00eancia dos seus clientes no seu site. Inclui tutorial passo a passo.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png","width":1998,"height":622,"caption":"Modal Bootstrap b\u00e1sico com estrutura (cabe\u00e7alho, corpo e rodap\u00e9)"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/modal-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Modal Bootstrap : um guia b\u00e1sico (com tutorial)"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4","name":"Gustavo Gallas","description":"Analista de sistemas, formado pela PUC-Rio. Programador, gestor de redes e diretor da empresa Homehost. Pai do B\u00f3ris, seu pet de estima\u00e7\u00e3o. Gosta de rock'n'roll, cerveja artesanal e de escrever sobre assuntos t\u00e9cnicos. Contato: gustavo.blog@homehost.com.br"}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/3-Modal-Ba\u0301sico.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3542"}],"version-history":[{"count":63,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3542\/revisions"}],"predecessor-version":[{"id":13074,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3542\/revisions\/13074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3550"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}