如何在按钮单击时隐藏 Bootstrap 5 模式
[英]How to hide Bootstrap 5 modal on button click
问题描述
I have a Bootstrap 5 modal, which is used to download a file by clicking a button.
我有一个 Bootstrap 5 模式，用于通过单击按钮下载文件。 This works fine, but I want the modal to be hidden after clicking the download button, and this is where I'm struggling.这很好用，但我希望在单击下载按钮后隐藏模式，这就是我苦苦挣扎的地方。
I am attempting to use jQuery to do this.我正在尝试使用jQuery来执行此操作。 I know that the jQuery library is successfully imported and that my function is being executed because I can display an alert box within the same function, but I can't get the modal to hide.我知道jQuery库已成功导入，并且我的 function 正在执行，因为我可以在同一个 function 中显示一个警告框，但我无法隐藏模式。
The full code snippet is pasted below with the script section at the bottom.完整的代码片段粘贴在下方，脚本部分位于底部。 The key line of code that I am trying to use to dismiss the modal is: -我试图用来解除模式的关键代码行是：-
$('#downloadConfirm1').modal({show : false});
I have also tried the following: -我还尝试了以下方法：-
$('.modal.in').modal('hide');
But neither has worked.但两者都没有奏效。 I am extremely grateful to anyone who takes the time to read my post.我非常感谢任何花时间阅读我的帖子的人。 Any suggestions most welcome!欢迎提出任何建议！
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<a class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#downloadConfirm1"
role="button">Download
</a>
<div class="modal fade" id="downloadConfirm1" tabindex="-1" aria-labelledby="downloadConfirm1"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="downloadModalLabel">Confirm download</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Download Docx_test_file.docx?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<a href="files/dummy.pdf" download="dummy.pdf">
<button type="button" id="download_button1">Download</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$('#download_button1').click(function() {
alert("Hello! I am an alert box!!");
$('#downloadConfirm1').modal({show : false});
});
</script>
</html>
2 个解决方案
解决方案1
1 已采纳 2022-04-17 17:30:12
Bootstrap 5 modal dropped jQuery so that is why you cannot hide the modal with jQuery. Bootstrap 5 modal 丢弃了 jQuery，这就是为什么你不能用 jQuery 隐藏模态的原因。 You should save your modal instance in the moment of initialization.您应该在初始化时保存您的模态实例。
Afterwards you can use this code to hide your modal.之后，您可以使用此代码隐藏您的模式。
Ref: Bootstrap 5 Modal#hide参考： Bootstrap 5 模态#hide
var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));
var modal = document.getElementById('downloadConfirm1');
modalInstance.hide(modal);
解决方案2
0 2022-08-30 11:36:47
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.