开发者问题收集

我该如何修复这个 Bootstrap v5.0.2 模态框问题？案例问题

2021-07-24
2363
javascript html css twitter-bootstrap bootstrap-5

我只是想就这个问题寻求一些帮助，我不知道它为什么会发生。正如标题所暗示的，目前，我正在使用 bootstrap 版本 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)
2个回答

这似乎是您引入脚本的方式。

尝试仅从此开始： 

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

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

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

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

Munei Nengwenani
2021-07-24

Bootstrap 5 不再需要 jQuery。请参阅 Bootstrap 文档 ，确保您使用的脚本正确无误...

"Place one of the following scripts near the end of your pages, right before the closing body tag, to enable them." 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

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

Carol Skelly
2021-07-24