Problems with modal/boostrap

Asked

Viewed 695 times

5

Hello, I have a problem on my site, I would like when I click on the modal button, it closes and opens the modal again(the following code is a summary code of what I need), in this code, when I open the page the modal opens automatically, and when I click the close button, it closes and opens, however, when I do it twice, the modal just doesn’t open anymore and the screen gets all black and locked.

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

Has anyone ever had that problem, or do you know how to fix it? Grateful from now on!

jquery twitter-bootstrap modal

  • Sometimes the problem is in inserting JS files from Bootstrap, check your browser console may be missing some import and apparently your code is with two Bootstrap declarations which may cause this conflict!

  • When you close the modal it has to open right away again ? then why allow it to close ?

  • 1

    @Ericrosario thanks, I’ll check.

1 answer

1

Friend, you can not put everything in the same function, why you are using the same to hide and display call them separately, try to do as follows:

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

  • Thanks, I’ll try anyway, when I get to the spot I’ll let you know if it works

  • Unfortunately the problem persists.

Browser other questions tagged jquery twitter-bootstrap modal

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