Code does not find modal

Asked

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>

javascript html twitter-bootstrap bootstrap-4

1 answer

1


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>

  • as I appreciate but am having a problem when I step these 3 scripts down other scripts stop working!

  • Forget it, I got it fixed! after all the problem was not having the scripts at the bottom or on top of the modal was even the order of reading the scripts wherever they are!

  • 1

    @Davidmv this Bootstrap type frameworks can sometimes be quite boring, these orders have to be followed to the letter, or things stop working. That well that solved there. []s

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

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