我在 bootstrap 4 中隐藏模态有问题。 在我的 tmp 函数中我必须关闭模式之后我需要使用方法 update_table(url)
HTML 和 JS
<div class="modal" id="Modal" tabindex="-1" role="dialog"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript">
function abrir_modal(url) {
$('#Modal').load(url, function () {
$(this).modal('show');
});
return false;
}
function tmp(url) {
$('#Modal').on('shown.bs.modal', function (e) {
$("#Modal").modal('hide');
})
update_table(url);
}
function update_table(url) {
$.ajax({
type: "GET",
url: url
})
.done(function () {
refresh_table();
});
}
function refresh_table() {
$.ajax({
type: "GET",
url: "{% url 'Project:Task_Schedule_TableView' %}"
})
.done(function (response) {
$("#_appendHere").load("{% url 'Project:Task_Schedule_TableView' %}" + "#_appendHere");
});
};
function hide_modal() {
console.log($('#Modal').modal('name'))
$('#Modal').modal('hide');
console.log(33)
return false;
}
</script>
我不知道出了什么问题,但是当我尝试使用 hide_modal
函数而不是 tmp 函数时,模态被隐藏了。
最佳答案
这是用于隐藏弹出窗口的 Bootstrap 4 Modal Pop Up 的简单代码。 你可以检查这个..
$('#Modal').modal('show');
function tmp(url) {
$("#Modal").modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="modal" id="Modal">
<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="close" data-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-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
当显示弹出窗口时,从浏览器控制台调用此函数.. tmp('http://test/test');
它将隐藏弹出窗口。与 Bootstrap 3 相同
关于javascript - 模态隐藏在 Bootstrap 4 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51304227/