Website Freezes When Click on the Back Button of the 'Static Backdrop Modal' in Bootstrap [Fixed using JS/TS(Angular 13)]

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
### Modal Content ###
</div>
<!-- /Modal -->

Have you ever encountered a frustrating glitch in Bootstrap modals? Specifically, when users click the back button, the modal disappears, but the backdrop lingers, creating a blurry and dark overlay on your webpage. To add to the frustration, there's no support or feedback option in the official documentation.

In addressing this challenge, I've discovered a solution using JavaScript/TypeScript (Angular 13). The beauty of it is that you can apply a similar fix with other programming languages or frameworks. The key is understanding the problem and implementing a tailored solution.

So, if you've faced this issue, fear not – there's a way out. By comprehending the problem and finding creative solutions, we contribute to a more collaborative coding community.

Here's how I fixed the issue step by step:

1. Bootstrap comes with a built-in close(X) button for modals. You can close the modal smoothly without affecting the webpage's appearance by using bootstrap attribute data-bs-dismiss="modal".

2. The close button in HTML looks like this (using Bootstrap attribute data-bs-dismiss="modal"):
   

<div class="modal-footer">
  <button type="button" id="MyModalCloseBtn" class="btn btn-secondary" data-bs-dismiss="modal">
    Close
  </button>
</div>

3. I gave the button a custom ID, id="MyModalCloseBtn" so we can easily fetch it using JavaScript or TypeScript.

4.

@HostListener('window:popstate', ['$event'])
onPopState(event: any) {}

This Angular code utilizes the @HostListener decorator to track changes in the browser's navigation history, triggered by user actions like clicking the back or forward button (window:popstate). Similar functionality exists in various programming/scripting languages and frameworks, each with its own event listener mechanism. To implement similar behavior in other contexts, look for the relevant event listener for tracking navigation events.

5. After declaring @HostListener, you can grab the HTML element using:

@HostListener('window:popstate', ['$event'])
onPopState(event: any) {
  const modal = document.getElementById('MyModalCloseBtn');
}

6. To close the modal when the user presses the browser's back button (on our case), we use the data-bs-dismiss="modal" attribute:

@HostListener('window:popstate', ['$event'])
onPopState(event: any) {
  const modal = document.getElementById('MyModalCloseBtn');
  if (modal) {
    modal.click(); //Clicks the Button with attribute `data-bs-dismiss="modal"` and id `id="MyModalCloseBtn"`
  }
}

This attribute essentially tells Bootstrap to dismiss (close) the modal when this button is clicked, and it does so without introducing any blurry or dark overlay on the webpage. So, when the user navigates back using the browser's back button, the modal will close smoothly.

7. In the end, coding isn't just about languages and frameworks. It's about tackling problems, getting creative, and sharing the love. Keep coding, keep it simple, and most importantly, keep sharing! Happy Coding!