Question

我想点击手机后退按钮关闭弹出窗口。我使用onhashchange实现了这个：

window.onhashchange = function (event) {

};

在这种情况下，如果弹出多次，然后单击后退按钮，则会打开并关闭模式弹出窗口。但是，我希望模式弹出窗口在第一个背面关闭，然后导航到下一个返回的prev页面。

我也尝试过使用onbeforeunload，但它会显示另一个警告离开或停留在页面上。

$(window).bind('beforeunload', function(e) {
    return false;
});

关闭弹出后退按钮并在下一页重定向到prev页面的最佳方法是什么？

Answer 1

当我测试我的答案时，

bootply.com失败了。请参阅下面代码底部的内联脚本和注释。其余的只是Twitter Bootstrap样板，以便我可以在本地轻松测试。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>modal.html</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>If you press the back button now, you should return to whatever page you were on before this page.</p>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show me the modal!</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>If you press the web browser's back button OR the modal's close buttons, the modal will close and the hash will return to "modal.html#modalClosed".</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
      // Immutable hash state identifiers. 
      var closedModalHashStateId = "#modalClosed";
      var openModalHashStateId = "#modalOpen";

      /* Updating the hash state creates a new entry
       * in the web browser's history. The latest entry in the web browser's
       * history is "modal.html#modalClosed". */
      window.location.hash = closedModalHashStateId;

      /* The latest entry in the web browser's history is now "modal.html#modalOpen".
       * The entry before this is "modal.html#modalClosed". */
      $('#myModal').on('show.bs.modal', function(e) {
        window.location.hash = openModalHashStateId;
      });  

      /* When the user closes the modal using the Twitter Bootstrap UI, 
       * we just return to the previous entry in the web 
       * browser's history, which is "modal.html#modalClosed". This is the same thing
       * that happens when the user clicks the web browser's back button. */
      $('#myModal').on('hide.bs.modal', function(e) {
        window.history.back();
      });      
    </script>
  </body>
</html>

Answer 2

if (window.history && window.history.pushState) {
    $('#myModal').on('show.bs.modal', function (e) {
        window.history.pushState('forward', null, './#modal');
    });

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

Answer 3

这可以使用 Apache Cordova 轻松完成，但不确定您是否使用它来在webview中显示您的页面。

function onBackKeyDown(e) {
  e.preventDefault();

}
document.addEventListener("backbutton", onBackKeyDown, false);

http://cordova.apache.org/docs/en/2.4.0/cordova_events_events.md.html#backbutton

Answer 4

根据http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html

.data(matrix, function (d) { return d.x + ":" + d.y; })

Answer 5

点击后退，自动 $（＆＃39; .modal＆＃39;）。hide（）功能被激活。所以不需要隐藏模态。我们可以在后退按钮后看到灰色阴影背景。您可以使用这些代码行之一关闭模式弹出窗口。

$（＆＃39; .modal＆＃39;）。modal（＆＃39; hide＆＃39;）。data（＆＃39; bs.modal＆＃39;，null）; [在bootstrap 3上工作]

或

$（＆＃39;主体＆＃39）。removeClass（＆＃39;模态开＆＃39）;

$（＆＃39; .modal-背景＆＃39）除去（）;

当模态处于活动状态时检查页面，您可以看到这些类。如果这种方法错误或存在其他简单方法，请纠正我。

Answer 6

这是我的引导模态解决方案。它为所有引导程序模式增加了使用后退按钮关闭的支持。您可以将其调整为适合您的非引导弹出式窗口。

//Modal Closer With Back Button Support (Uses EventDelegation, so it works for ajax loaded content too.)
(function() {
    var activeOpenedModalId     = null;
    var isHidingModalByPopState = false;
    $(document).on('show.bs.modal', '.modal', function() {
        activeOpenedModalId  = $(this).attr('id');
        window.location.hash = activeOpenedModalId;
    }).on('hide.bs.modal', '.modal', function() {
        if(!isHidingModalByPopState) {
            window.history.back();
        }
        isHidingModalByPopState = false;
        activeOpenedModalId     = null;
    });
    $(window).on('popstate', function() {
        if(activeOpenedModalId && window.location.hash !== '#'+activeOpenedModalId) {
            isHidingModalByPopState = true;
            $("#" + activeOpenedModalId).modal('hide');
        }
    });
})();

Answer 7

我为自己的网站编写此代码

并且在不同的设备和浏览器上测试了太多次

Chromium 71 ， Chrome 67 ， FireFox 65 ， Android 4.1 ， Android 4.2 ， Android 7.1

window.onload=function(){

    State=0;

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

    setTimeout(function(){// fix old webkit bug
        window.onpopstate=function(e){
            State=e.state;
            if(e.state=="hide"){
                $(".modal").modal("hide");
            }
        };
    },999);

    $("#myModal").modal("show");
};

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

Answer 8

我在Angular中的解决方案

// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
  window.history.pushState(ref.id, '');
  // pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
  ref.afterClosed().subscribe(() => {
    if (history.state === ref.id) {
      window.history.go(-1);
    }
  });
});

Answer 9

问题：当模式打开时，用户单击浏览器的后退按钮，页面导航（向后或向前），但模式保持打开状态。

解决方案：

在Javascript中：

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

在Angular中：

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

Answer 10

我会这样做：

// 2.0 and above
@Override
public void onBackPressed(evt) {
    evt.preventDefault();
    closeTab();
}

// Before 2.0
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        evt.preventDefault();
        closeTab();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

- ＆GT;这些是处理程序btw，需要addEventListener =）

我已经通过记忆完成了这项工作，以后我会在我的代码混乱中找到它并进行检查。夹

关闭后退按钮弹出

10 个答案: