Question

我使用Bootstrap来创建一个模态但是它只加载灰色背景而不是实际的对话框本身。我该如何修复这个模态显示？

由于

这是代码。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

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

</head>

<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <p> Modal </p>
    </div>
  </div>
</div>

</body>

</html>

Answer 1

这是因为您正在使用Bootstrap尚未支持的jQuery version 3.0.0-alpha

在this fiddle我已经使用了您的代码和jQuery version 2.1.4，其模式可以正常工作。

在this fiddle我已使用您的确切代码与jQuery version 3.0.0-alpha无法正常工作

解决方案：

从：

更改您的jQuery版本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

要：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

希望这有帮助！

Bootstrap Modal仅显示背景

1 个答案:

解决方案：