如何用JavaScript关闭Bootstrap 5.2模态框（禁用jQuery）

我在学校项目里用Bootstrap做了个模态框，需要用JavaScript验证输入内容。现在想在不用jQuery的前提下，用JS关闭模态框——输入合法时保存更改，不合法时提示错误。

我的HTML代码： #

<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p class="text" id="prompted">How much do you want to bet?</p>
            <div class="input-group mb-2">
                <input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
                <span class="input-group-text">€</span>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
            <button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
        </div>
    </div>
    </div>
</div>

我的JavaScript代码： #

function bid(){
    let valueOfBid = document.getElementById("bAmount").value;
    if(isNaN(valueOfBid)){
        //Cancel the prompt
    }

    players[realPlayer].bet=valueOfBid;
    changeButtonState(false);
    theTimer();
}

解决方法 #

Bootstrap 5及以上版本提供了原生JS的模态框操作API，完全不需要依赖jQuery就能实现需求。

1. 核心：获取模态框实例并关闭 #

通过bootstrap.Modal.getOrCreateInstance方法获取模态框实例，再调用hide()方法就能关闭它：

// 获取模态框实例（如果实例已存在就直接获取，不存在则创建）
const bidModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('bidModal'));
// 执行关闭操作
bidModal.hide();

2. 完善输入验证逻辑 #

修改你的bid()函数，加入完整的验证规则和错误提示，只有输入合法时才执行保存和关闭操作：

function bid() {
    const valueOfBid = document.getElementById("bAmount").value.trim();
    const bidModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('bidModal'));
    const promptElement = document.getElementById('prompted');

    // 重置提示文本的样式和内容
    promptElement.classList.remove('text-danger');
    promptElement.textContent = 'How much do you want to bet?';
    
    // 多条件验证：不能为空、必须是数字、金额大于0
    if (!valueOfBid || isNaN(valueOfBid) || parseFloat(valueOfBid) <= 0) {
        promptElement.textContent = '请输入有效的金额（必须是大于0的数字）';
        promptElement.classList.add('text-danger');
        return; // 输入不合法，终止后续代码执行
    }

    // 输入合法，执行保存逻辑
    players[realPlayer].bet = parseFloat(valueOfBid);
    changeButtonState(false);
    theTimer();
    
    // 关闭模态框
    bidModal.hide();
}

3. 额外优化建议 #

• 把输入框的type从text改成number，可以在浏览器层面做基础的数字输入限制，配合step="0.01"支持小数金额：

  <input id="bAmount" type="number" step="0.01" class="form-control text" aria-label="Amount of bet">
  

• 可以给输入框添加required属性，配合浏览器原生表单验证，但如果需要自定义错误提示，保留JS验证逻辑即可。

内容的提问来源于stack exchange，提问作者Camillo