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

使用jquery unLoad event 然后在你的回调中删除模态

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

Answer 2

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

之后添加一些内容

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

然后你可以挂钩到这样的jQuery事件：

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

Answer 3

＆＃13;

//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');
});

＆＃13;

这很有效。 ^ _ ^

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

3 个答案: