如何仅在成功时隐藏 Bootstrap 5 模态？

Question

使用 bootstrap 5

我有一个模态框，当点击 #truck_modal 时我会显示它，它工作得很好，就像这样：

（此代码位于我的 js 文件的顶部）

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#add_truck').addEventListener('click', AddTruck);

    const truck_modal = document.querySelector('#staticBackdrop');
    const modal = new bootstrap.Modal(truck_modal, {
        backdrop: 'static'
    });

    document.querySelector('#truck_modal').addEventListener('click', () => {
        modal.show();
    });
})

现在，如果我将以下内容添加到上面的函数中，它就可以工作了。

document.querySelector('#add_truck').addEventListener('click', () => {
     modal.hide();
});

但是这里不管AddTruck函数成功与否，只要点击#add_truck就会运行，我只想在AddTruck函数成功时隐藏，所以我尝试了以下方法。

function AddTruck() {

    ... some validations ...

    fetch('/inbound/add_truck', {
        
        ... some fetch code ...

    })
    .then(response => {
        jsonResponse = response.json();
        status_code = response.status;

        // console.log(jsonResponse);
        // console.log(status_code);

        if(status_code != 200) {
            alert('There was an error!');

        } else{
            origin.value = '';
            produce.value = '';
            license_num.value = '';
            loaded_weight.value = '';

            // document.querySelector('#add_truck').addEventListener('click', () => {
            //     modal.hide();
            // });
            modal.hide();
            // hideFunc();

            alert('Success!!!')
        }

        return status_code
    })
    .catch(error => {
        console.log(error)
    })

}

甚至尝试过这个：

function hideFunc() {
    const truck_modal = document.querySelector('#staticBackdrop');
    const modal = new bootstrap.Modal(truck_modal, {
        backdrop: 'static'
    });

    modal.hide();
}

我在这里做错了什么？请帮忙...

或者这是一项功能？

编辑

这些是我的 js、bootstrap 和 jquery 脚本

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="{% static 'utils.js' %}"></script>

然后我将 $('#truck_modal').modal('hide'); 添加到我试图隐藏它的 else 块中。

Answer 1

试试这个，它对我有用。我使用 jquery

隐藏了模态框

$('#truck_modal').modal('hide');

Answer 2

其实这很简单。不敢相信我花了两天时间... ‍♂️

我只是将模态作为参数发送给 AddTruck 函数，如下所示：

document.querySelector('#add_truck').addEventListener('click', () => AddTruck(modal));

然后 modal.hide() 在 AddTruck 函数中工作。

Answer 3

我也有这个问题，遗憾的是它在椅子和键盘之间 :(（也许在文档中写得不太清楚。只是为了证明自己 :)）

您的模式已经存在。所以调用：

function hideFunc() {
    const truck_modal = document.querySelector('#staticBackdrop');
    const modal = new bootstrap.Modal(truck_modal, {
        backdrop: 'static'
    });

    modal.hide();
}

将不起作用，因为您正在创建新的模式。因此，您创建一个新模态，将其背景设置为静态，然后将其隐藏。甚至没有显示它。

您不想创建一个新的，而是想通过使用 bootstrap.Modal.getInstance 调用/寻址已经存在的一个。像这样：

function hideFunc() {
    const truck_modal = document.querySelector('#staticBackdrop');
    const modal = bootstrap.Modal.getInstance(truck_modal);    
    modal.hide();
}

通过这种方式，您可以自定义模态（下拉菜单、弹出框...）处理程序。文档中只是简单介绍，容易被忽略

Answer 4

要隐藏 Bootstrap 模式，请使用此代码段

var myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModalId'));
myModal.hide();

如何仅在成功时隐藏 Bootstrap 5 模态？

How to hide Bootstrap 5 modal only on success?

javascript

bootstrap-modal

hide

bootstrap-5

编辑