问题描述
使用引导程序 5
我有一个模式,当点击 #truck_modal
时我会显示它,就像这样:
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、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 块中。
解决方法
我也有这个问题,遗憾的是它在椅子和键盘之间:((可能还有一点没有明确写的文档。只是为了证明自己:))
您的模态已经存在。所以打电话:
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();
}
通过这种方式,您可以制作自己的自定义模态(下拉、弹出框、...)处理程序。文档中只是简单描述,很容易忽略。
,试试这个,它对我有用。我使用 jquery 隐藏我的模态
$('#truck_modal').modal('hide');
,
所以这实际上很容易。不敢相信我花了两天时间... ?♂️
我只是将模态作为参数发送到 AddTruck
函数,如下所示:
document.querySelector('#add_truck').addEventListener('click',() => AddTruck(modal));
然后 modal.hide()
在 AddTruck
函数内工作。