使用 bootstrap 不显示模态

Question

每当我按下按钮时，模态框就不会出现，我尝试了很多东西，甚至创建了一个 custom.js 将这段代码放入

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

但是就是不行，我哪里做错了？

这是代码

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

Answer 1

问题是 jQuery 3.0.0-alpha1 版本未被 bootstrap 3.3.5

完全支持

原因模态不显示

使用默认 bootstrap 行为的按钮模态触发或
打开模式 jQuery $("#myModal").modal("show")

是因为.modal属性display:none没有变成display:block

Fiddle

解法一

切换回 jQuery jQuery 2.x

的上一个稳定版本

解决方案 2 使用 jQuery 3.0.0-alpha1

使用 bootstrap 模态 event 侦听器并在显示模态时将 .modal 属性从 display:none 更改为 diaply:block。;

如果使用按钮触发模式

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

Fiddle

如果使用jQuery打开模式

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

Fiddle

使用 bootstrap 不显示模态

Modal doesn't show up using bootstrap

jquery

twitter-bootstrap

bootstrap-modal