Bootstrap 模态仅显示背景

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

这是因为您正在使用 jQuery version 3.0.0-alpha Bootstrap

尚不支持

在 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 模态仅显示背景

Bootstrap Modal only displays backdrop

modal-dialog

twitter-bootstrap

解决方案：