Open & Close Your Bootstrap 3 Modal with Back & Forward Button

Stephanus Yanaputra — Thu, 06 Apr 2023 00:29:16 +0000

If you are here, there is a chance your client or your requirement needs you to open & close Bootstrap 3 modal with Browsers' Back & Forward Button.

In this article, I will show you a trick to do this without using the History API.

Step 1: Add the Modal Markup

The first step is to add the modal markup to your HTML file. Here is an example of what the markup might look like:

<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="video-modal-label">Modal Title</h4>
            </div>
            <div class="modal-body">
                <p>Modal Content</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

For the sake of explanation, the id of the modal will be #video-modal.

Step 2: Set the Hash on Modal Show and Hide

Next, we need to update the URL hash when the modal is shown or hidden. We can do this by adding event listeners to the modal's show.bs.modal and hide.bs.modal events.

You can add this to your javascript file.

$('#video-modal').on('show.bs.modal', function(event) {
    window.location.hash = "video-modal";
});
$('#video-modal').on('hide.bs.modal', function(event) {
    window.location.hash = "";
});

This code sets the URL hash to "video-modal" when the modal is shown, and removes it when the modal is hidden.

Step 3: Handle Hash Changes

Now that we're setting the hash when the modal is shown or hidden, we need to handle changes to the hash in the URL. We can do this by adding an event listener to the window's hashchange event.

Here's the updated javascript code:

$(window).on('hashchange', function (event) {
    var $videoModal = $('#video-modal');

    if ($videoModal.length > 0) {
        if(window.location.hash === "#video-modal") {
            $('#video-modal').modal('show');
        } else {
            $('#video-modal').modal('hide');
        }
    }
});

This code checks if the URL hash is equal to video-modal. If it is, it shows the modal. If it's not, it hides the modal.

Step 4: Test it Out

Now that we've added the necessary code, we can test out the modal and see if it's opening and closing as expected. When you click on a link or button that opens the modal, you should see the URL change to include "#video-modal". When you close the modal, the URL should go back to its original state.

Conclusion