如何隐藏Bootstrap 5模式的成功？
使用引导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();
});但是当单击#add_truck时，不管AddTruck函数成功与否，它都会在这里运行，我只希望它在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、引导程序和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');添加到了我试图隐藏它的其他块中。
回答 4
Stack Overflow用户
发布于 2021-03-09 11:08:05
我也有这个问题，很遗憾，它介于椅子和键盘之间:(也许在写得不清楚的文档中也有一点问题)。为自己辩护:)
你的模式已经存在了。所以打电话：
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();
}这样你就可以定制Modal (下拉，Popover，.)处理程序。在文档中只简要地描述了它，因此很容易忽略它。
Stack Overflow用户
发布于 2022-05-20 13:42:46
若要隐藏引导模式，请使用以下代码片段
var myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModalId'));
myModal.hide();Stack Overflow用户
发布于 2021-03-09 07:50:28
所以这其实很简单。真不敢相信我花了两天时间..。♂️
我只是将模态作为param发送到AddTruck函数，如下所示：
document.querySelector('#add_truck').addEventListener('click', () => AddTruck(modal));然后modal.hide()在AddTruck函数中工作。
https://stackoverflow.com/questions/66541564
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号