Problemas com modal/boostrap

Stack Overflow em Português Asked by Leonardo Walbrinch on December 22, 2021

Olá, estou com um problema no meu site, gostaria que quando eu clicasse no botão do modal, ele fechasse e abrisse o modal novamente(o código a seguir é um código resumido do que eu necessito), neste código, quando eu abro a página o modal abre automaticamente, e quando eu clico no botao close, ele fecha e abre, porém, quando faço isso duas vezes, o modal simplesmente não abre mais e a tela fica toda preta e travada.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" onclick="functiona()" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
<?php
      $IdUsuario = $_GET['IdUsuario'];
      $senhaConfere = "nao"

      if (isset($senhaConfere)) {
        if ($senhaConfere=="nao") { 
          echo $senhaConfere;
          ?>
          <script>
            $(document).ready(function(){
              $('#myModal').modal('show');
            });
          </script>
    <?php
        }
      }                
    ?>
}
?>
<script>
function functiona(){
	$(document).ready(function(){
    	$('#myModal').modal('hide');
    	$('#myModal').modal('show');
	});
}
</script>

</body>
</html>

Alguém já teve esse problema, ou sabe como resolver?
Grato desde já!

jquery modal twitter bootstrap

One Answer

Amigo, você não pode colocar tudo na mesma função, por que você tá usando a mesma para ocultar e exibir chame-as separadamente, tente fazer da seguinte forma:

   <script>
        function ocultar(){
                $('#myModal').modal('hide');
        }
        $(document).ready(function(){
                $('#myModal').modal('show');
     });
        </script>

Answered by Dudut on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!