时间戳

首页 > 解决方案 > Bootstrap Modal 不会出现

javascript - Bootstrap Modal 不会出现

问题描述

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

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

这是我的代码：

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

标签： javascripthtmltwitter-bootstrapbootstrap-modal

解决方案

  1. 您使用 Bootstrap 4.0.0 中的 CSS 和 Bootstrap 3.7.7 中的 JS。它不应该工作。让我们使用 3.4.1 :)
  2. 您的id模态属性的末尾有一个额外的空格。让我们删除它。
  3. data-dismiss我们在属性末尾有相同的额外空间。它会阻止关闭按钮。让我们也修复它。

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

推荐阅读