it-swarm.com.de

Schließen Sie die Schaltfläche "Zurück"

Ich möchte das Popup-Fenster beim Klicken auf die Schaltfläche "Zurück" für Handys schließen. Ich habe dies mit onhashchange implementiert:

window.onhashchange = function (event) {

};

Wenn in diesem Fall das Popup-Fenster mehrmals geöffnet wird, öffnet und schließt es mit dem Zurück-Button das modale Popup-Fenster. Aber ich möchte, dass sich das modale Pop-Up beim ersten Zurück schließt und zur vorherigen Seite beim nächsten Zurück navigiert.

Ich habe auch versucht, onbeforeunload zu verwenden, aber es wird eine weitere Warnung angezeigt, wenn Sie die Seite verlassen oder auf dieser Seite bleiben möchten.

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

Was ist der beste Weg, um den Popup-Button auf dem Zurück-Button zu schließen und zur vorherigen Seite im nächsten Zurück weiterzuleiten?

14
Yogesh

bootply.com war inaktiv, als ich meine Antwort testete. Das Inline-Skript und die Kommentare finden Sie unten im Code. Der Rest ist nur Twitter Bootstrap Boilerplate, so dass ich es einfach lokal testen kann.

<!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>
8
Kayce Basques
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');
    });
}
9
kjetils

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

    $('#myModal').on('show.bs.modal', function(e) {
        window.location.hash = "modal";
    });

    $(window).on('hashchange', function (event) {
        if(window.location.hash != "#modal") {
            $('#myModal').modal('hide');
        }
    });
2
Raymond Ativie

Dies kann leicht mit Apache Cordova durchgeführt werden, ist aber nicht sicher, ob Sie es verwenden, um Ihre Seite in Webview anzuzeigen.

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

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

http://cordova.Apache.org/docs/de/2.4.0/cordova_events_events.md.html#backbutton

1
Abhi

Durch Klicken auf Zurück wird automatisch $ ('. Modal'). Hide () function aktiviert .. _. Modal muss also nicht ausgeblendet werden. Nach dem Zurück-Button können wir einen grau hinterlegten Hintergrund sehen. Sie können eine dieser Codezeilen verwenden, um das modale Popup-Fenster zu schließen.

  1. $ ('. modal') .modal ('hide') .data ('bs.modal', null); [Arbeit an Bootstrap 3]

Oder 

  1. $ ('body'). removeClass ('modal-open');

    $ ('. Modal-Hintergrund'). remove ();

Überprüfen Sie die Seite, wenn Modal aktiviert ist. Sie können diese Klassen sehen. Korrigieren Sie mich, wenn diese Methode falsch ist oder eine andere einfache Möglichkeit besteht.

1

Ich schreibe diesen Code für meine eigene Website

und zu oft mit verschiedenen Geräten und Browsern getestet

Chrom 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");
};
  • benutze nicht $(document).ready anstelle von window.onload
0
Samad

Dies ist meine Lösung für Bootstrap-Modals. Alle Bootstrap-Modals werden mit dem Zurück-Button unterstützt. Sie können es für Ihre Nicht-Bootstrap-Popups anpassen.

//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');
        }
    });
})();
0
Fatih K.