1
resposta

Como adicionar mais modais aos cards

Boa tarde, estou tentando adicionar novos modais, porém não está funcionando.

<article class="card mt-5 borda-cor-especial card-imagem">
            <img src="src/img/receita-abacate.jpg" class="card-imagem-top" alt="tigela com salada de abacate, vista superior">
            <div class="card-body">
              <h5 class="card-title">Tigela de abacate</h5>
              <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
              <a href="#" class="btn btn-cor-especial" data-toggle="modal" data-target="#modal-receita">Veja a receita</a>
            </div>
          </article>

Eu gostaria de adicionar um novo modal nos outros 5 cards. O código acima é do modal implementado na aula. Então para o que mesmo seja acrescentado, não é só alterar o data-target="#modal-receita" e acrescentar um modal novo alterando seu id?

1 resposta

Oi, Diego, tudo bem?

Você pode criar outros modais, mas irá precisar definir o data-target="#modal-receita-salada-kiwi", por exemplo, e dentro do campo do modal definir o id, com o mesmo data-target, dessa forma: id="modal-receita-salada-kiwi". Assim, você cria o relacionamento o campo do card com o campo do modal.

Qualquer dúvida, é só falar!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software