使用浏览器后退按钮删除模式答案

【问题标题】：Using browser back button to remove modal使用浏览器后退按钮删除模式
【发布时间】：2013-08-17 05:43:12
【问题描述】：

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;
        }
}

【问题讨论】：

标签： javascript jquery modal-dialog coffeescript jquery-events

【解决方案1】：

使用jquery unLoad event 然后在您的回调中删除模式

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

【讨论】：

【解决方案2】：

我认为最好的方法是在 hash-tag 之后添加一些内容

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

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

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

【讨论】：

【解决方案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');
});

这行得通。 ^_^

【讨论】：