0

Galera, tô aprendendo a usar Bootstrap 4 e queria saber se é possível e se sim, como usar mais de um modal em uma página? queria usar 3 modais na msm página, ou até mais, no entanto, mesmo com as identificações diferentes eu n estou conseguindo chamar mais de um modal na pagina. Segue uma parte do codigo:

<div class="col-lg-4 col-md-6 col-sm-12 float-left mb-2">
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="img/acoes/exemplo.png">
            <div class="card-body">
                <h5 class="card-title">Anuncio</h5>
                <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. an unknown</p>
                <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal">Visitar</a>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12 float-left mb-2">
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="img/acoes/exemplo.png">
            <div class="card-body">
                <h5 class="card-title">Anuncio</h5>
                <p class="card-text">It is a long established fact that a reader will be dist has a more-or-less normal.</p>
                <a class="btn btn-primary" href="#" data-toggle="modal2" data-target="#modal2">Visitar</a>
            </div>
        </div>
    </div>

percebam que no segundo card eu chamo outro modal. Agora vou mandar o código dos modais:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" arialabelledby="modal" ariahidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <!-- Cabeçalho do modal -->

            <div class="modal-header">
                <h5 class="modal-title">Modal 1</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Copro do modal -->

            <div class="modal-body">



            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="modal2" tabindex="-1" role="dialog" arialabelledby="modal2" ariahidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <!-- Cabeçalho do modal -->

            <div class="modal-header">
                <h5 class="modal-title">Modal 2</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Copro do modal -->

            <div class="modal-body">



            </div>

        </div>
    </div>
</div>

Enfim, quem puder me ajudar, da uma força, serei mt grato!!

1 Resposta 1

0

para adicionar mais modal basta só trocar o Id id="myModal", id="myModal2" id="myModal3" ...

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

E no botão para abrir o modal basta por o Id correspondente

Exemplo:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .