引导模式不会弹出

6uxekuva  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(406)

下面是我从bootstrap网站复制的代码。我不明白为什么它不工作,即使它在它的网站上作为一个演示。

  1. <!-- Button trigger modal -->
  2. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  3. Launch demo modal
  4. </button>
  5. <!-- Modal -->
  6. <div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  7. <div class="modal-dialog modal-dialog-centered" role="document">
  8. <div class="modal-content">
  9. <div class="modal-header">
  10. <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
  11. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  12. <span aria-hidden="true">&times;</span>
  13. </button>
  14. </div>
  15. <div class="modal-body">
  16. ...
  17. </div>
  18. <div class="modal-footer">
  19. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  20. <button type="button" class="btn btn-primary">Save changes</button>
  21. </div>
  22. </div>
  23. </div>
  24. </div>

下面是我的引导脚本和链接标签

  1. <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>
  2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  3. <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

我应该如何调试它?

nfeuvbwi

nfeuvbwi1#

确保在引导之前加载jquery:

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

检查此处的示例:https://jsfiddle.net/xpslfgzn/1/ 这就像你的代码的魅力。

8gsdolmq

8gsdolmq2#

bootstrap=样式库+一堆jquery插件
顺便说一下,如果您只需要bootstrap样式,那么根本不需要为jquery和bootstrap引入js文件

相关问题