Code does not find modal

Question

Code does not find modal

Asked 5 years, 5 months ago

Viewed 21 times

1

Hello

I have a type button image that supposedly should be opening the modal but on my site does not open.

I have bootstrap installed from the most updated version, I can not understand why my modal does not open, someone can help me?

<div class="imagemavatar">
                    <img type="button" src="./imagens/avatar2.png" class="img-fluid" data-toggle="modal"
                        data-target="#exampleModalCenter1" >
                </div>
                
                <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- hearder -->

                        <h5 class="modal-title" id="exampleModalLongTitle">Lúcia Rodrigues</h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>

                    <div class="modal-body">
                        <!-- body -->

                        <div class="imagemdocaso">
                            <img src="./imagens/avatar2.png" width="100%" height="100%">
                        </div>

                        <div class="descricao">
                            <p>
                                <b>Data do caso:</b> 05 de janeiro de 2019 <br>
                                <b>Nome da vítima:</b> Lúcia Rodrigues <br>
                                <b>Idade da Vítima:</b> 48 anos <br>
                                <b>Localidade:</b> Lagoa, Algarve
                            </p>

                        </div>

                    </div>

                    <div class="modal-footer">
                        <!-- footer -->
                        <a href="https://www.cmjornal.pt/exclusivos/detalhe/cacador-mata-mulher-por-ciumes-doentios"
                            class="noticia btn btn-outline-warning buttonlink" target="_blank">Noticia completa</a>

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

1 answer

Browser other questions tagged javascript html twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-05-31T10:07:47+00:00

You have to check exactly the order that is importing the Bootstrap dependencies (CSS/jQuery/Bootstrap.JS) notice the order and location where these dependencies are attached.

Here in the documentation they speak as it should be home template https://getbootstrap.com.br/docs/4.1/getting-started/introduction/#template-home

And here’s your modal working along the steps of the documentation.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
</head>

<body>

  <div class="imagemavatar">
    <img type="button" src="https://placecage.com/100/100" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter1">
  </div>

  <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <!-- hearder -->

          <h5 class="modal-title" id="exampleModalLongTitle">Lúcia Rodrigues</h5>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

        </div>

        <div class="modal-body">
          <!-- body -->

          <div class="imagemdocaso">
            <img src="https://placecage.com/100/50" width="100%" height="100%">
          </div>

          <div class="descricao">
            <p>
              <b>Data do caso:</b> 05 de janeiro de 2019 <br>
              <b>Nome da vítima:</b> Lúcia Rodrigues <br>
              <b>Idade da Vítima:</b> 48 anos <br>
              <b>Localidade:</b> Lagoa, Algarve
            </p>

          </div>

        </div>

        <div class="modal-footer">
          <!-- footer -->
          <a href="https://www.cmjornal.pt/exclusivos/detalhe/cacador-mata-mulher-por-ciumes-doentios"
            class="noticia btn btn-outline-warning buttonlink" target="_blank">Noticia completa</a>

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

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>