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?
Thanks
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">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<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">
window.parent.history.forward();
function noBack() { window.parent.forward(); }
</SCRIPT>
</HEAD>
A better way i found thanks to http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = "modal";
});
$(window).on('hashchange', function (event) {
if(window.location.hash != "#modal") {
$('#myModal').modal('hide');
}
});
来源：https://stackoverflow.com/questions/16870007/how-to-close-a-bootstrap-modal-with-the-browser-back-button-instead-of-going-bac