我该如何解决这个 Bootstrap v5.0.2 模态问题？案例问题答案

【问题标题】：How could I fix this Bootstrap v5.0.2 Modal Problem? A Case Problem我该如何解决这个 Bootstrap v5.0.2 模态问题？案例问题
【发布时间】：2021-07-24 08:43:26
【问题描述】：

我只是想就这个问题寻求一些帮助，我不知道它为什么会发生。正如标题所暗示的，目前，我正在使用 5.0.2 版的引导程序（js 和 css）。问题是，尽管尝试对所有必需的参数进行编码，但我无法使模态功能正常工作。我不知道我是否遗漏了什么或什么，但这个错误让我永远无法解决。谢谢

代码：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

    <link rel="stylesheet" href="css/bootstrap-5.0.2-css/bootstrap.css"> <!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <script src="js/jquery-3.6.0.js" ></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <script src="js/bootstrap-5.0.2-js/bootstrap.bundle.js"> </script> <!-- BOOTSTRAP JS -->
    <script src="js/script.js"> </script>
    <script src="js/scriptForEdit.js"> </script>



</head>
<body> 

    <!-- CONTENT -->

   ....
        
        <button id="previewFormattedSchedules" class="sp-btn-size lsc-btn-adjust btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalcontainer">Preview Formatted Schedules</button>
        <button id="validateSchedules" class="sp-btn-size lsc-btn-adjust position-absolute btn btn-outline-primary">Validate</button>
        <button id="finalizeSchedules" class="sp-btn-size lsc-btn-adjust position-absolute btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalcontainer">Finalize</button>
                            



<!-- MODAL -->
<div class="modal fade" id="modalcontainer" tabindex="-1" aria-labelledby="modalcontainer" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div> 

    
</body>
</html>

错误：

modal.js:332 Uncaught TypeError: Cannot read property 'classList' of undefined
    at Modal._isAnimated (modal.js:332)
    at Modal._initializeBackDrop (modal.js:205)
    at new Modal (modal.js:82)
    at Function.getOrCreateInstance (base-component.js:55)
    at HTMLButtonElement.<anonymous> (modal.js:434)
    at HTMLDocument.handler (event-handler.js:120)

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-5

【解决方案1】：

似乎是你引入脚本的方式。

尝试只从这个开始：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

用于引导程序包含。将脚本放在 html 文件的底部也是一种很好的做法，css 可以留在头部。

这是一个有效的 codepen 链接： https://codepen.io/munein/pen/abWVjQG

【讨论】：

【解决方案2】：

Bootstrap 5 不再需要 jQuery。请参阅Bootstrap docs 以确保您使用的是正确的脚本...

“将以下脚本之一放置在页面末尾附近，在结束 body 标签之前，启用它们。”

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

然后模态将按预期工作：https://codeply.com/p/9NpwTOVDTi

【讨论】：