Bootstrap模态框不会出现

Question

我已经在我的页面上添加了一个 bootstrap 模态，但是在单击按钮时它没有出现，即使我在另一个项目中使用它并且它的设置方式完全相同。

我不知道如何解决这个问题，当我点击按钮时没有任何反应。

这是我的代码：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan " tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered " role="document ">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">Modal title</h5>
        <button type="button " class="close " data-dismiss="modal " aria-label="Close ">
            <span aria-hidden="true ">&times;</span>
        </button>
        </div>
        <div class="modal-body ">
          ...
        </div>
        <div class="modal-footer ">
        <button type="button " class="btn btn-secondary " data-dismiss="modal ">Close</button>
        <button type="button " class="btn btn-primary ">Save changes</button>
        </div>
    </div>
  </div>
</div>

Answer 1

您使用 Bootstrap 4.0.0 的 CSS 和 Bootstrap 3.7.7 的 JS。它不应该工作。让我们使用 3.4.1 :)
模态框的 id 属性末尾多了一个 space。让我们删除它。
并且我们在 data-dismiss 属性的末尾有相同的额外 space。它阻止了关闭按钮。让我们也修复它。

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan" tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog" role="document">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">Modal title</h5>
        <button type="button " class="close " data-dismiss="modal" aria-label="Close ">
            <span aria-hidden="true ">&times;</span>
        </button>
        </div>
        <div class="modal-body ">
          ...
        </div>
        <div class="modal-footer ">
        <button type="button " class="btn btn-secondary " data-dismiss="modal">Close</button>
        <button type="button " class="btn btn-primary ">Save changes</button>
        </div>
    </div>
  </div>
</div>

Answer 2

首先，使用这些导入使其工作。

CSS 和 JavaScript 版本的 Bootstrap 应该匹配。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

其次，属性末尾不要有空格

除了导入之外，由于 HTML 属性中的空格过多，我在您的代码中发现了另外两个问题。

Bootstrap找不到目标模态元素
打开模式时，关闭按钮不起作用

原因：

id="employeedropdownscan "
data-dismiss="modal "

如何修复：

id="employeedropdownscan"
data-dismiss="modal"

完整代码/工作片段

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here">

<!-- Modal -->
<div class="modal fade" id="employeedropdownscan" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">
            Modal title
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

Bootstrap模态框不会出现

Bootstrap Modal will not appear

html

javascript

twitter-bootstrap

bootstrap-modal