Modal window (Boostrap) is not visible

Navigation
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, guys.

I'm starting to study web development and I'm having trouble making a modal (Bootstrap) visible. After I activate the link that will show the modal, I even realize that it is present in the page (the links behind are "disabled" when I move the mouse over), but the components do not appear. What can I be doing wrong?

    
asked by anonymous 03.02.2018 / 21:59

1 answer

0

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

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

Since you're using the BootstrapCDN to include CSS, I'd advise you to pull JavaScript also from there: 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><linkrel="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 we recommend that you load all scripts immediately before closing the <boby> tag.

Some errors found in your code:

  • Double loading jQuery
  • Scripts loaded in the head of the page

I may be wrong, but I think you're loading FontAwesome in the wrong way. The correct would be to upload a CSS file that can be found here .

    
03.02.2018 / 22:21
Database Connection with Php Integer with 0 on the left is printed as another number