Issue
I have a Bootstrap 5 modal, which is used to download a file by clicking a button. 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. 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.
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>
Solution
Bootstrap 5 modal dropped jQuery so that is why you cannot hide the modal with jQuery. You should save your modal instance in the moment of initialization.
Afterwards you can use this code to hide your modal.
var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));
var modal = document.getElementById('downloadConfirm1');
modalInstance.hide(modal);
Answered By - BrunoT Answer Checked By - Terry (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.