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>

回答1:

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

来源：https://stackoverflow.com/questions/33118855/modal-doesnt-show-up-using-bootstrap

标签

jquery

twitter-bootstrap

bootstrap-modal