how to close a bootstrap modal with the browser back button instead of going back a page?`

Related searches

I have found this an issue with smartphones and it can relate to desktops. We have 'modded' our bootstrap modal to be responsive, however when displayed on a smartphone it is in full screen, the user assumes the modal is a page and clicks back to 'close' it. We have included the in the top right X but would also like the back button to close the modal. Anyone have any ideas?


Easiest way is to make user feel that its pop-up or model not a new page, by using some margins or making it span10 offset1 kind of.

Another way around is Open and Close method which is described here

And the best method is

<SCRIPT type="text/javascript">
   function noBack() { window.history.forward(); }
<BODY onload="noBack();"onpageshow="if (event.persisted) noBack();" onunload="">

Described here

for controlling back button from iFrame, try this may help (not tested)

<SCRIPT type="text/javascript">
   function noBack() { window.parent.forward(); }

When browser back button is clicked, bootstrap modal is closed but , Cause back button to close Bootstrap modal windows - backbutton close in the back button to really go back to the previous page after you close the modal. To navigate to an other page (for instance by clicking a link) triggers closing of the modal (and the bfcache saves the page with a closed modal) Possible solutions: prevent your modal from closing when clicking outside it (see: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

A better way i found thanks to

    $('#myModal').on('', function(e) {
        window.location.hash = "modal";

    $(window).on('hashchange', function (event) {
        if(window.location.hash != "#modal") {

Cause back button to close Bootstrap modal windows � GitHub, how to close a bootstrap modal with the browser back button instead of going back a page?` 发布于 2020-05-03 06:34:00. I have found this an issue with� One caveat to note with the above is that if you go to a page with a modal, open the modal then press back, back, this will work as expected (it will close the modal and then navigate back to the previous page), however if the user presses forward, forward now the url will now show something like this:

You can do that by writing a few lines of code however you'll need a better method in order to achieve a consistent result in which pressing the browser/mobile back button AND hiding modal using [x] button or clicking outside the modal work identical.

I consider the following method a better solution in that sense. it works on modern browsers (HTML5 Javascript ES6) with Bootstrap 4.0 or higher but you'd be able to adapt it for older browser support.

1- Assign a data-hash="#some-hash" attribute to all of the modals that you want to close via browser back button.

2- the block responsible for appending hash to the url

// Add hash to the URL on open modal event
$('.modal').on('', function() {
    if (typeof(this.dataset.hash) !== 'undefined') {
        history.pushState(null, null, this.dataset.hash)

3- listen to event and determine if the back button is pressed or not

// trigger browser back button when the modal is dismissed (using x button etc...)
$('.modal').on('', function(event) {
    if (this.dataset.pushback !== 'true') {
    this.dataset.pushback = ''

4- the block responsible to handle browser back button. we add the pushback attribute as a flag to indicate back button press event.

// Close current open modal (if any) on browser back event
window.onpopstate = function() {
    let open_modal = document.querySelector('')
    if (open_modal) {
        open_modal.dataset.pushback = 'true';

how to close a bootstrap modal with the browser back button instead , I have a full screen modal - now if a user clicks the browsers back button the bro. should not redirect the user to the previous page it should only close the modal . Go to the bootstrap website/ javascript and look at the modal code, they have � When you click to open the modal multiple times and then close it without using the back button, the history keeps track of each state that is being added by pushState but is not being popped. With that you would have to click multiple times in the back button to really go back to the previous page after you close the modal.

Javascript, Resolving that interaction should close the modal, and there should will need to click the back button twice to get back to the previous page. close as the subjects clicked the browser back button, and instead sent Closing a modal window using the back button in the browser is none standard practice. Now, we are going to create a button to open a modal but the button will work on JavaScript onclick event. Similarly, on clicking the close button of our Bootstrap modal will close the modal. Below is the code of open and close Bootstrap Modal using jQuery: <button onclick="open_modal();">Open modal with jQuery</button> <!--

Good idea to have back button close a modal window?, A modal with close button demo. In this example, a modal with the close button is created using Bootstrap 4 framework. The close button markup is placed after the modal-title in the modal-content div. So, the cross button displays towards the top right bar of the modal window. Have a look at this online example and launch the modal by pressing

I want to close pop up on click of back button for mobile. I implemented this using onhashchange: window.onhashchange = function (event) { }; In this case, if pop up is opened multiple times then on click of back button, it opens and closes the modal pop up. But, I want modal pop up to close on first back and navigate to prev page on next back.

  • We faced the exact same problem with Bootstrap 3.0 Modal in Mobile App. We were also using AngularJS 1.4.7. We fixed this issue as mentioned here, Mentioned answer is relevant only if you are using AngularJS though.
  • Thanks, kind of worked but messed with the Modal, I will have to have a deeper look. Cheers.
  • thanks @SlimGG - I have been looking at this and it works for the parent page. However I am using an iFrame and have tried putting the code in the iframe head content but it does does not work. I guess I am looking for a function that disables the back button only if the modal is open.
  • U can access parent window using window.parent.document. More info at