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

Question

我只想创建一个模态页面，它的行为与按下浏览器后退按钮或模式内的关闭按钮相同，使用 bootstrap 3. 我找到了一个脚本可以做到这一点，但是有一个问题。假设我从 google.com 开始，转到这个模式页面，然后按下 "Modal!" 按钮，然后按下浏览器后退按钮，它将关闭模式，如果我再次按下后退按钮，它会带我回到 google.com（一切都很好）。但是这一次，如果我打开模式页面并使用 "close" 按钮关闭模式。但是现在，我必须按两次后退按钮才能返回 google.com。如果我使用模态内部的关闭按钮打开和关闭模态 10 倍。我发现我必须再按浏览器后退按钮 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 source

Answer 1

我找到了解决办法。随意 post 任何其他优雅的解决方案。

$('#myModal').on('hide.bs.modal', function (e) {
    if(location.hash=='#modal')window.history.back();
});

$(window).on('popstate', function (event) {  //pressed back button
    if(event.state!==null)$('.modal').modal('hide');
});

Answer 2

您可以使用以下代码来摆脱打开的模式 window 而不会意外移动到浏览器的上一页。

//When ever the modal is shown the below code will execute.
$(".modal").on("shown.bs.modal", function()  {
    var urlReplace = "#" + $(this).attr('id'); 
    history.pushState(null, null, urlReplace); 
  });

  // This code gets executed when the back button is clicked, hide any/open modals.
  $(window).on('popstate', function() { 
    $(".modal").modal('hide');
  });

编辑：- 来自回复解决方案

$(".modal").on("hidden.bs.modal",function(){history.back(1);});

Answer 3

点击按钮弹出窗口。

$(document).ready(function(){
      $(".popup-btn").click(function () {
          location.hash = "popup";
          $(".popup-panel").show();
      });
});

位置改变时它会被隐藏：

$(window).bind('hashchange', function () {
      if (location.hash == null || location.hash == "") {
          $(".popup-panel").hide();
      }
});

Answer 4

我知道这个问题是在 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();          
    }
  });
});

我看到很多人都在寻找解决方案，现在我要停止搜索。这应该是我们一直在等待的确切工作 "Closing bootstrap modal on click of back button on PC and Mobile and on back swipe gesture on mobile too (tested)"。随意根据您的需要自定义它。快乐的一天:)

Answer 5

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

window.onload=function(){

    State=popset=0;
    setpops=function(){
        if(popset) return;popset=1;// dont set event multiple times
        window.onpopstate=function(e){
            State=e.state;
            if(e.state=="hide"){
                $(".modal").modal("hide").removeClass("in show");
                $(".modal-backdrop").remove();// force hide bg
                /* in some old devices .modal("hide") is not enough */
            }
        };
    };

    $(".modal")
    .on("show.bs.modal",function(){// while modal show
        path=window.location.pathname+window.location.search;
        history.pushState("hide",null,path);
        history.pushState("show",null,path);
        State="show";
    })
    .on("hidden.bs.modal",function(){// while modal hide
        if(!!State)
            history.go(State=="hide"?-1:-2);// remove extra forward states
    });

    window.onpopstate=function(){setpops();};

    setTimeout(function(){setpops();},2000);// fix old webkit bug

};

不要使用 $(document).ready 而不是 window.onload

在 Chrome 87、FireFox 84、Chromium 88、Android 4.1 / 4.2 / 7.1 / 9.0

上测试

(我是user5490177删除了回答same question的帐号，这是一个新的改进版本)

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

bootstrap 3 close Modal when pushing browser back button

jquery

browser-history

bootstrap-modal