How to use more than one modal bootstrap on a single web page

Question

Guys, I’m learning to use Bootstrap 4 and I was wondering if it’s possible and if so, how to use more than one modal on a page? wanted to use 3 modals on the msm page, or even more, however, even with the different identifications I’m not able to call more of a modal on the page. Follow a part of the code:

<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>

Notice that on the second card I call another modal. Now I’m gonna send you the modal code:

<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>

Anyway, who can help me, give a force, I will be very grateful!!

Answer 1

to add more modal just change 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>

And on the button to open the modal just by the corresponding id

Example:

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