小賴的實戰記錄

    // Immutable hash state identifiers. 
    var closedModalHashStateId = "#modalClosed";
    var openModalHashStateId = "#modalOpen";
    var openModal = false;

    
    $('.form_modal').on('show.bs.modal', function(e) {
        openModal = true;
        window.location.hash = openModalHashStateId;        
    });  


    $('.form_modal').on('hide.bs.modal', function(e) {
        if(openModal) {
            openModel = false;
            window.history.back();
        }        
    });  

    function change(state) {
        if(window.location.hash=='' ) {
            if(openModal == true) {
                openModal = false;
                $('.modal').modal('hide');
            }
        } 
    }

    $(window).on("popstate", function(e) {
        change(e.originalEvent.state);
    });

相關參考網址

http://stackoverflow.com/questions/25377383/close-pop-up-on-back-button  -  參考設定hash

http://stackoverflow.com/questions/17978043/how-to-close-all-active-bootstrap-modals-on-session-timeout  - 參考modal hide

http://stackoverflow.com/questions/8038726/how-to-trigger-change-when-using-the-back-button-with-history-pushstate-and-pops - 參考change event

----------

因為前端設計工程師，有使用bootstrap 的 modal 功能，很方便，但，問題來了，跳出整個畫面後，但如果使用瀏覽器的history back(回上頁的功能)，結果不是將畫面消失，而是跳回上一頁，

讓使用者有點感覺怪怪的。

所以需要為這類的做一些處理

所以，要打開時，使用hash，加入openModal，這樣back時，就只是移除hash而已，

但如果是openModal後關閉呢，則看他是否還在開啟中，開啟中，則直接使用window.history.back，change 是偵測history back， on('hide.bs.modal') 則是偵測關閉按鈕的事件。但只要其中一個關了，就不需要在使用window.history.back或$('.modal').modal('hide')

因為數量很多，只要有.form_modal的類別，都套用這種模式。

就搞定了。