How to hide Bootstrap 5 modal on button click-CodePudding

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 >
        <a  data-bs-toggle="modal"
           data-bs-target="#downloadConfirm1"
           role="button">Download
        </a>
    
        <div  id="downloadConfirm1" tabindex="-1" aria-labelledby="downloadConfirm1"
             aria-hidden="true">
            <div >
                <div >
                    <div >
                        <h5  id="downloadModalLabel">Confirm download</h5>
                        <button type="button"  data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div >
                        <p>Download Docx_test_file.docx?</p>
                    </div>
                    <div >
                        <button type="button"  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>

CodePudding user response：

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.

Ref: Bootstrap 5 Modal#hide

var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));

var modal = document.getElementById('downloadConfirm1'); 
modalInstance.hide(modal);