CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-modal
Jack Moscovi
Jack Moscovi

Reputation: 2269

Modal doesn't show up using bootstrap

Whenever I press the button , the modal just won't show up, I tried so many things even creating a custom.js to put this code in 

$('#myModal').modal('show');

But it just doesn't work, Where did i do wrong?

Here's the code

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <!-- Button -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Get Started</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 4

Views: 9643

Answers (1)

Shehary
Shehary

Reputation: 9992

Problem is that jQuery 3.0.0-alpha1 version Not Fully Supported by bootstrap 3.3.5

Reason modal not showing

  • either modal trigger by button using default bootstrap behavior OR
  • opening the modal with jQuery $("#myModal").modal("show")

is because .modal property display:none is not changing to display:block

Fiddle

Solution-1

Switch back to last stable version of jQuery jQuery 2.x

Solution-2 using jQuery 3.0.0-alpha1

Use bootstrap modal event listener and change .modal property from display:none to diaply:block when modal shown.;

If using button to trigger the modal

$(document).ready(function () {
    $("#myModal").on('shown.bs.modal', function () {
        $(".modal").css('display', 'block');
    })
});

Fiddle

If using jQuery to open the modal

$(document).ready(function () {
    $("#myModal").modal("show").on('shown.bs.modal', function () {
        $(".modal").css('display', 'block');
    })
});

Fiddle

Upvotes: 6

Related Questions