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>

Boa tarde, pessoal.

Estou começando a estudar desenvolvimento web e estou com dificuldades para fazer uma modal (Bootstrap) ficar visível. Depois que eu aciono o link que mostrará a modal, eu até percebo que ela está presente na página (os links por trás ficam "desabilitado" quando passo o mouse por cima), mas os componentes não aparecem. O que posso estar fazendo de errado?

3
  • Acho que sei qual o problema. O que é informado no console quando executa a página?
    – bonifacio
    3/02/2018 às 21:13
  • @wmsouza, não era este o caso (já havia testado isso). Quando eu removia o atributo "href" o link deixa de ser um link, ficava desabilitado. 4/02/2018 às 1:01
  • Por padrão o Bootstrap previne o evento padrão de elementos com data-toggle="modal". Logo, independente do link possuir href="pagina.php" ou href="#", o que vai prevalecer é o evento de toggle do modal.
    – bonifacio
    4/02/2018 às 1:40

1 Resposta 1

0

O seu problema pode estar relacionado com o javascript que está utilizando.

O Bootstrap possui versões específicas. Para utilizar o Bootstrap 4.0.0, vai precisar do css e do javascript na mesma versão.

Como você está utilizando a BootstrapCDN para incluir o CSS, aconselho a puxar o JavaScript também de lá:

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

Só isso parece resolver o seu problema.

Lembrando que é recomendável carregar todos os scripts imediatamente antes do fechamento da tag <boby>.

Alguns erros encontrados no seu código:

  • Duplo carregamento do jQuery
  • Scripts carregados no head da página

Posso estar enganado, mas acho que você está carregando o FontAwesome de forma errada. O correto seria carregar um arquivo CSS que pode ser encontrado aqui.

4
  • E se não for esse o problema? Creio que deveria esperar o AP da um parecer!
    – NoobSaibot
    3/02/2018 às 21:46
  • @wmsouza Fiz o teste em minha máquina, e foi esse o único problema encontrado. Creio que deveria esperar um parecer do autor da pergunta antes de downvotar algo totalmente relacionado à pergunta.
    – bonifacio
    3/02/2018 às 21:54
  • Resolveu, @DanielBonifácio. Segui suas considerações e, por via das dúvidas, removi os carregamentos que tinha e peguei todos no site do Bootstrap para trabalhar via CDN. Foi colar os links retirados da página principal (getbootstrap.com) que o modal apareceu corretamente. Obrigado, gente!! 4/02/2018 às 1:04
  • @GenivaldoSilva Fico feliz em ter ajudado! :D
    – bonifacio
    4/02/2018 às 1:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .