bootstrap 3关闭模式按下浏览器后退按钮

Question

我只是想创建一个模态页面,其行为相同,要么使用bootstrap 3按下浏览器后退按钮或模式内的关闭按钮.我找到了一个脚本来执行此操作,但是存在问题.让我说我开始使用google.com,转到这个模态页面,然后推送"模态!" 按钮,然后按下浏览器后退按钮,它将关闭模式,如果我再次按下后退按钮,它将带我回google.com(一切都很好).但是这一次,如果我打开模态页面并使用"关闭"按钮关闭模态.但现在,我必须按两次后退按钮才能返回google.com.如果我用模态内的关闭按钮打开和关闭模态,如10x.我发现我必须再次按下浏览器10按钮才能返回google.com页面.如何解决这个问题？TIA

<!--html, bootstrap 3.2.0-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <p>If you press the web browser's back button not the modal's "close" button, the modal will close and the hash "#myModal" will be removed for the URL</p>
  </div>
  <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

<!--jquery-->
$('#myModal').on('show.bs.modal', function (e) {
    window.history.pushState('forward', null, '#modal');
});

$('#myModal').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 () {
    $('#myModal').modal('hide');
});

jsfiddle来源

Answer 1

我知道这个问题是在 2016 年提出的，现在已经是 2020 年了，但我仍然回答这个问题，是为了那些将来可能会搜索这个问题的人（我相信人们会的）。

这是解决此问题的一站式解决方案。只需将以下代码复制并粘贴到您网站的 .js 文件（如 custom.js）或简单地粘贴到页脚中（$(document).ready(function(){})如

$(document).ready(function(){
  $('div.modal').on('show.bs.modal', function() {
    var modal = this;
    var hash = modal.id;
    window.location.hash = hash;
    window.onhashchange = function() {
      if (!location.hash){
        $(modal).modal('hide');
      }
    }
  });
  $('div.modal').on('hidden.bs.modal', function() {
    var hash = this.id;
    history.replaceState('', document.title, window.location.pathname);
  });
  // when close button clicked simulate back
  $('div.modal button.close').on('click', function(){
    window.history.back();
  })
  // when esc pressed when modal open simulate back
  $('div.modal').keyup(function(e) {
    if (e.keyCode == 27){
      window.history.back();          
    }
  });
});

我看到很多人都在寻找解决方案，现在我正在对搜索进行句号。这应该完成我们一直在等待的“在 PC 和移动设备上单击后退按钮以及移动设备上的后退滑动手势时关闭引导模式（已测试）”。请随意根据您的需求进行定制。快乐的一天 ：）

Answer 2

我将此代码用于我自己的网站

\n

window.onload=function(){\n\n    State=popset=0;\n    setpops=function(){\n        if(popset) return;popset=1;// dont set event multiple times\n        window.onpopstate=function(e){\n            State=e.state;\n            if(e.state=="hide"){\n                $(".modal").modal("hide").removeClass("in show");\n                $(".modal-backdrop").remove();// force hide bg\n                /* in some old devices .modal("hide") is not enough */\n            }\n        };\n    };\n\n    $(".modal")\n    .on("show.bs.modal",function(){// while modal show\n        path=window.location.pathname+window.location.search;\n        history.pushState("hide",null,path);\n        history.pushState("show",null,path);\n        State="show";\n    })\n    .on("hidden.bs.modal",function(){// while modal hide\n        if(!!State)\n            history.go(State=="hide"?-1:-2);// remove extra forward states\n    });\n\n    window.onpopstate=function(){setpops();};\n\n    setTimeout(function(){setpops();},2000);// fix old webkit bug\n\n};\n

\n

\n
• 不要使用$(document).ready代替window.onload
\n

\n

在Chrome 87、\xc2\xa0 FireFox 84、\xc2\xa0 Chromium 88、\xc2\xa0 Android 4.1 / 4.2 / 7.1 / 9.0上测试

\n

（我是user5490177删除的帐户，回答了同样的问题，这是一个新的改进版本）

\n