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

问题

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

回答1:

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>

回答2:

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

标签

jquery

jquery-ui

twitter-bootstrap

modal-dialog