无法读取模态弹出 Bootstrap 5.1 中未定义的属性 'classList'

Question

我在 bootstrap 5.1 模态弹出窗口上遇到问题并收到错误 Cannot read 属性 'classList' of undefined 。我尝试了两种显示模式弹出窗口的代码，但仍然存在同样的问题。我想通过 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

已更新，使用 javascript 触发：

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

为什么要使用两个 bootstrap JS 文件？还包括可用的最新版本：

<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>

const myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
const trigg = document.querySelector('#modal-trigger');

function showModal(el){
  el.show();
}

// Event 1:  show after 1 second:
setTimeout(function() {
  showModal(myModal);
  trigg.style.display = 'inline-block';
}, 1000)

// Event 2: show on click:
trigg.addEventListener('click', function(){
  showModal(myModal);
});

#modal-trigger {
  display: none;
}

<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" id="modal-trigger">
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>

如果你真的必须将 vanilla JS 与 jQuery 混合使用（无论出于何种原因），你可以执行以下操作：

const trigg = $('#modal-trigger');

trigg.on('click', function(){
  showModal(myModal);
});

Answer 2

你很亲密，

新 bootstrap.Modal 期待另一个参数。

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

Answer 3

以上回答正确。您的弹出窗口未显示的原因是未定义。

这件事今天发生在我身上，我正在 React 中有条件地渲染模态。确切地说，当我返回模态标记时，我还调用了一个函数来显示它。

错误是我试图在它尚未返回时显示模态，因此 document.getElementById('myModal') 未定义。为了解决这个问题，我总是渲染模态，并且只有在特定条件为真时才显示它。

很抱歉我来晚了，我希望我能帮助解决这个问题的人。

无法读取模态弹出 Bootstrap 5.1 中未定义的属性 'classList'

Cannot read property 'classList' of undefined in Modal popup Bootstrap 5.1

javascript

bootstrap-modal

无法读取模态弹出 Bootstrap 5.1 中未定义的 属性 'classList'

Cannot read property 'classList' of undefined in Modal popup Bootstrap 5.1

javascript

bootstrap-modal

无法读取模态弹出 Bootstrap 5.1 中未定义的属性 'classList'