Question

我有一个按钮可以打开Bootstrap 4模式。

这是html：

<button
  type="button"
  class="btn btn-info btn-circle btn-sm"
  data-toggle="modal"
  data-target="#editModal"
  id="btn-modal"
>
  <i class="fas fa-fw fa-pencil-alt"></i>
</button>

<div
  class="modal fade"
  id="editModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="editModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <i class="fas fa-times" style="margin-right:5px"></i> Cancel
          </button>
          <button type="submit" name="submit" class="btn btn-success">
            <i class="fas fa-location-arrow " style="margin-right:5px"></i> Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

这是JavaScript：

$('#btn-modal').on('click', function(){    
    $("#editModal").modal('show');  
});

我在js函数中添加了console.log("clicked")，并显示在控制台中。但仍然没有显示模式。有人可以告诉我正确的方法吗？谢谢。

Answer 1

请确保要在页面末尾附近</body>标记之前导入所有js文件，以启用它们。除了不需要js代码之外，jQuery必须首先出现，然后是Popper.js，然后是我们的JavaScript插件。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

请检查以下链接：

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

Answer 2

您的代码对我有用。最多删除不需要的JS。

This is a jsFiddle使用您自己的代码，减去JS，就可以正常工作！

<button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i class="fas fa-fw fa-pencil-alt"></i>Open</button>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times" style="margin-right:5px"></i> Cancel</button>
          <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow " style="margin-right:5px"></i> Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 3

这是整个HTML文件。如果这样不起作用，您可能已在浏览器中打开了JavaScript？！

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" id="btn-modal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i
            class="fas fa-fw fa-pencil-alt"></i>Open</button>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" action="xx">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="editModalLabel">Edit</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        //Modal Body
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times"
                                style="margin-right:5px"></i> Cancel</button>
                        <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow "
                                style="margin-right:5px"></i> Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

模态Bootstrap 4不显示

3 个答案: