How to close a bootstrap modal popup after downloading a file

1
votes

I have a popup that uses bootstrap modal. The popup allows the user to either download a file or cancel. What I want to do is close the popup once the user clicks on the 'Download' button (and the download starts), as it does for the cancel option.

I tried using data-dismiss on the type submit button for downloading and while that closed it, a download was not initiated.

This is how my two buttons look:

<div class="modal-footer">
    <button type="submit" class="btn btn-primary">Download</button>
    <button type="button" class="btn btn=secondary" data-dismiss="modal">Cancel</button>
</div>

Right now when I click on the button, a download starts but the popup remains. If I click on Cancel, the popup closes. Can I close after download with something like data-dismiss, or do I need javascript for this?

2
javascriptjqueryhtmlbootstrap-modal

2 Answers

3
votes

According to the doc, you can hide your modal with jquery with $('#myModal').modal('hide'). Add an id to your modal and then dismiss it with jquery inside your download function as below:

function download() {
    $('#myModal').modal('hide');
    ....
    ....
}
0
votes

Yes, you have to close the modal using javascript inside the function where you initiate download. (You can even trigger the clicking of cancel button)