Make back button on phone close bootstrap modal

Question

I have a simple modal that I took from Bootstrap example code. It's like this:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I want to be able to close the modal with the back button on a phone, because it takes up the whole page on a mobile device, and searching for the "x" at the top right isn't very convenient. I took a look at the documentation, but there is only an option to close the modal with the Escape key on a keyboard, and no such solution for a mobile device. Can anyone assist me?

Answer 1

I made it work for my case implementing both https://stackoverflow.com/a/42114285/5118339 and https://stackoverflow.com/a/25464754/5118339, and some fixes

function handleBackPress(event) {
    event.preventDefault();
    event.stopPropagation();

    $('.modal').modal('hide');
    $('.modal-backdrop').remove();
}

var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";

/* Updating the hash state creates a new entry
 * in the web browser's history. The latest entry in the web browser's
 * history is "modal.html#modalClosed". */
window.location.hash = closedModalHashStateId;

$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);

/* The latest entry in the web browser's history is now "modal.html#modalOpen".
 * The entry before this is "modal.html#modalClosed". */
$('.modal').on('show.bs.modal', function(e) {
  window.history.pushState('forward', null, './'+openModalHashStateId);
});  

/* When the user closes the modal using the Twitter Bootstrap UI, 
 * we just return to the previous entry in the web 
 * browser's history, which is "modal.html#modalClosed". This is the same thing
 * that happens when the user clicks the web browser's back button. */
$('.modal').on('hide.bs.modal', function(e) {
  window.history.back();
});  

Answer 2

Although i would recommend closing the modal with a simple X or close button, you should be able to listen to event via:

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});

You need to listen to navigation event and state.direction.

Have you thought about keeping the X in a static header on the modal? And the content is scrollable..