Modal window (Boostrap) is not visible

Question

Modal window (Boostrap) is not visible

Asked 7 years, 9 months ago

Viewed 1,273 times

0

<!doctype html>
<html lang="pt-br">
  <head>

    <title>Teste</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- Ícones do site Font Awesome -->
    <script src="js/fontawesome-all.js"></script>

    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <script src="js/validacoes.js"></script>

  </head>

  <body>

    <nav class="nav navbar-dark bg-dark justify-content-center">
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link" data-toggle="modal" data-target="#anoModal" href="">
                    <i class="fas fa-home"></i>
                    <span> </span>casa
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=""><i class="fas fa-car"></i><span> </span>carro</a>
            </li>
        </ul>    
    </nav>

    <!-- Tela (modal) -->
    <div id="anoModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <!-- Início Cabeçalho -->
                <div class="modal-header">
                    <h5 class="modal-title">Informe o ano de pesquisa</h5>
                </div>
                <!-- Fim Cabeçalho -->

                <!-- Início Corpo -->
                <div class="modal-body">
                    <label class="col-form-label">Informe o ano:</label>
                    <input type="text" class="form-control" id="ano">
                </div>
                <!-- Fim Corpo -->

                <!-- Início Rodapé -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Buscar</button>
                </div>
                <!-- Fim Rodapé -->

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

  </body>
</html>

Good afternoon, you guys.

I’m starting to study web development and I’m having a hard time making a modal (Bootstrap) visible. After I call the link that will show the modal, I even realize that it is present on the page (the links behind are "disabled" when I hover over), but the components do not appear. What could I be doing wrong?

I think I know what the problem is. What is reported in the console when you run the page?

– Daniel Bonifácio

2018/02/03 at 21:13
@wmsouza, this was not the case (I had already tested this). When I removed the attribute "href" the link ceases to be a link, it was disabled.

– Genivaldo Silva

2018/02/04 at 01:01
By default Bootstrap prevents the standard event of elements with data-toggle="modal". Therefore, regardless of the link have href="pagina.php" or href="#", what will prevail is the modal toggle event.

– Daniel Bonifácio

2018/02/04 at 01:40

1 answer

Browser other questions tagged jquery bootstrap modal

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

by Daniel Bonifácio • **951** points · Answer 1 · 2018-02-03T21:21:30+00:00

Your problem may be related to the javascript you are using.

Bootstrap has specific versions. To use Bootstrap 4.0.0, you will need css and javascript in the same version.

How are you utilizing the Bootstrapcdn to include CSS, I advise you to pull Javascript from there as well:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

That alone seems to solve your problem.

Remembering that it is recommended to load all scripts just before tag closing <boby>.

Some errors found in your code:

Double loading of jQuery
Scripts loaded into the page head

I may be mistaken, but I think you are loading the Fontawesome wrong. The correct thing would be to load a CSS file that can be found here.