How to prevent the Bootstrap modal from closing when browser refresh is done?

Question

I'm using Bootstrap modal window in my application. The modal window should not get close if the browser refresh functionality is done. Is there any way to achieve this?

Answer 1

You might consider using a cookie. When the page loads check to see if the cookie has the modal set as active. If so then load the modal.

So when you load the modal you would set the cookie.

var loadModal = function() {
    $('#myModal').modal('show');
    Cookies.set('isMyModalActive', true);
};

If you exit the modal remove it.

var exitModal = function() {
    $('#myModal').modal('hide');
    Cookies.remove('isMyModalActive');
};

Finally on page load check if the cookie exists.

if(Cookies.get('isMyModalActive')) {
    loadModal();
}

I'm using js-cookie for brevity. You could easily replace js-cookie with localStorage or Document.cookie