When the user clicks on the close button, I want to display a confirmation alert to confirm if they really want to close the modal. However, I have encountered an issue with hiding the modal and preventing it from being hidden in the two solutions that I have tried.
Here is how the modal is set up (excerpt of code)
<div class="modal fade" id="viewTicketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable vertical-align-center">
<div class="modal-content">
<div class="modal-header">
This is how the modal is shown
<a><i class="voyager-eye viewBtn" data-toggle="modal" data-target="#viewTicketModal"/></i></a>
Solution Attempt 1 (Closing modal using hide function)
This is how the modal is hidden
<button type="button" class="btn cancelModalBtnColor" onclick="closeTicketDetailsModal(event)">Close</button>
The function to close the modal
function closeTicketDetailsModal(e){
if(enteredEditModeBefore){
let text = "Proceeding will discard all changes that you may have made\nDo you wish to continue?";
e.preventDefault();
if (confirm(text) == true) {
console.log("Forgoing Changes!");
$('#viewTicketModal').modal('hide');
return;
} else {
console.log("You still want your changes!");
return false;
}
}
else{
console.log("HIDING MODAL");
$('#viewTicketModal').modal('hide');
return;
}
}
Issue with this solution
While it successfully hides the modal, it prevents the modal from being displayed when the triggering button is clicked again.
Solution Attempt 2 (Closing modal by using data-dismiss)
This is how the modal is hidden
<button type="button" class="btn cancelModalBtnColor" data-dismiss="modal">Close</button>
The function to close the modal
$('#viewTicketModal').on('hide.bs.modal', function(e) {
e.preventDefault();
return false;
});
Issue with this solution
Despite trying to prevent the modal from being dismissed, it doesn't work as expected.
What could be going wrong?