無法讀取模態彈出窗口 Bootstrap 5.1 中未定義的屬性“classList”

Question

我在 bootstrap 5.1 模式彈出窗口中遇到問題並收到錯誤無法讀取 undefined 的屬性“classList”。 我在顯示模態彈出窗口時嘗試了兩種代碼，但仍然存在相同的問題。 我想通過javascript方法調用這個模態彈出窗口，因為我需要根據場景顯示模態彈出窗口。

 function show() { var myModal = new bootstrap.Modal(document.getElementById('myModal'),{}) myModal.show(); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" onclick="show()"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

請嘗試以下操作：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

可以在文檔中找到更多信息： https : //getbootstrap.com/docs/5.0/components/modal/#live-demo

 <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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

你很近，

新的 bootstrap.Modal 期待另一個參數。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})

Answer 3

以上答案都是正確的。 您的 Popup 未顯示的原因是因為未定義。 今天發生在我身上，我在 React 中對模態進行條件渲染； 究竟發生了什么，當我返回模態標記時，我也在調用一個函數來顯示它。 錯誤是我試圖在尚未返回的情況下顯示模態，因此為什么 document.getElementById('myModal') 未定義。 為了解決這個問題，我總是渲染模態，並且只有在特定條件為真時才顯示它。 很抱歉我來晚了，我希望我可以幫助解決這個問題的人。