javascript - 使用浏览器后退按钮删除模式

Question

http://morningharwood.com/works单击右下角的项目按钮会弹出一个非常基本的模式。在进行测试时，我注意到后退按钮不会删除模式。如何确保浏览器后退按钮将删除模态窗口？

这是完整的要点

enter = $(".enter")
createModal = () ->
  $(".modal-bg").removeClass("animated fadeInUpBig").addClass "on animated fadeInUpBig"



$(enter).on "click", (event) ->
  createModal()

HTML

<a class="enter" href="#">View Project<span></span></a>

SCSS

  modal-bg{
    background:#fff;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index: 101;
    display:none;
    visibility:hidden;
    height:1px;

    &.on 
        {
            display: block !important;
            visibility: visible !important;
            height:100%;
            top:0;
        }
}

Answer 1

我认为最好的方法是在hash-tag

 <a class="enter" href="#project-modal">View Project<span></span></a>

然后你可以像这样挂钩一个jQuery事件：

 $(window).on('hashchange', function() {
   //... do some stuff here ...  
 });

Answer 2

使用 jquery unLoad 事件 然后在你的回调中删除模式

$( window ).unload(function() {
    removeModal()
});

Answer 3

//close modals with back btn
$('.modal').on('show.bs.modal', function (e) {
    window.history.pushState('forward', null, '#modal');
});

$('.modal').on('hide.bs.modal', function (e) {
    //pop the forward state to go back to original state before pushing the "Modal!" button
});

$(window).on('popstate', function () {
    $('.modal').modal('hide');
});

这行得通。^_^