无法读取模态弹出窗口 Bootstrap 5.1 中未定义的属性“classList”

Question

我在 bootstrap 5.1 模式弹出窗口中遇到问题，并收到错误 Cannot read property 'classList' of undefined 。我尝试了显示模式弹出窗口的两个代码，但仍然存在相同的问题。我只想通过 javascript 方法调用此模态弹出窗口，因为我需要根据场景显示模态弹出窗口。

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

其他答案都是正确的。您的弹出窗口未显示的原因是未定义。

这件事今天发生在我身上，我正在 React 中进行模态的条件渲染。到底发生了什么，当我返回模态标记时，我也在调用一个函数来显示它。

错误是我试图在尚未返回的情况下显示模态，因此为什么

document.getElementById('myModal')

未定义。为了解决这个问题，我总是渲染模态，并且仅在特定条件成立时才显示它。

很抱歉我这么晚了，我希望我可以帮助别人解决这个问题。

Answer 2

已更新，使用

javascript

触发：

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

为什么使用两个引导程序

JS

文件？ 还包括可用的最新版本：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

如果您确实必须将普通 JS 与 jQuery 混合使用（无论出于何种原因），您可以执行以下操作：

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

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

Answer 3

你很接近，

新的 bootstrap.Modal 需要另一个参数。

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

Answer 4

data-bs-target="#exampleModal" 此属性应该位于调用模态的链接或按钮中（标记为“#”）