Logo Forum SatellaSoft

Duvida sobre modal em bootstrap

Por: Adilson Calixto Data: 08/09/2017 Hora: 21:14:14 Acessos: 82

Bom curso amigão. Agora estou com u problema. Não consigo fazer aparecer a janela modal. Toda vez que clico no link de recuperar senha a modal não abre.

/* CÓDIGO*/

<input class="btn btn-primary" type="submit" value="Entrar">
          <a href="#" data-toggle="modal" data-target="#myModal">Recuperar senha</a>
    
      </div>
      
      </div>
       
   </div>
   
   
 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title" id="myModalLabel">Recuperar Senha</h5>
      </div>
      <div class="modal-body">
        <p>Para recuperar a senha, por favor, entre em contato com o Administrador.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
        
      </div>
    </div>
  </div>
</div>
   
   
   <script>       
       
        $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').focus()
        })
       
    </script>

Aonde estou errando? Agradecido por esse trabalho extraordinário que você está fazendo.




Fechado! O autor deste tópico marcou como resolvido.

Gunnar Correa

Entrou: 08/07/2017

Pontos: 16

Perguntas: 2

Respostas: 4

Apenas para ficar documentando, o que possívelmente estava faltando em seu script, era a importação do arquivo propper.js.

Na versão 4 do Boostrap, ele necessita desse script para rodar as suas funcionalidades.

Site: https://popper.js.org

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

<head>
    <title>Modal Bootstrap V4</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--<script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>
</head>

<body>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

 



Gunnar Correa

Entrou: 08/07/2017

Pontos: 16

Perguntas: 2

Respostas: 4

Olá, Adilson!

Você está usando qual versão do Bootstrap? 3 ou a mais recente, a 4?


Adilson Calixto dos Santos

Entrou: 08/09/2017

Pontos: 25

Perguntas: 5

Respostas: 5

Agradecido pela sugestão. Mudei para a versão 3 e até o código do Modal no site do bootstrap é ligeiramente diferente.

Deu tudo certo.

 

Agradecido



Adilson Calixto dos Santos

Entrou: 08/09/2017

Pontos: 25

Perguntas: 5

Respostas: 5

Boa tarde,

 

Agradecido pela atenção. Estou usando a versão 4.0.

 

att






Forum SatellaSoft - Todos os Direitos Reservados.

SatellaSoft - Todos os Direitos Reservados.

Contato Sobre Termos de uso SatellaSoft