Bootstrap 3 Schließen Modal beim Drücken des Browsers Zurück Button

Question

Ich möchte nur eine modale Seite erstellen, die entweder die Browser-Schaltfläche zurück oder die Schaltfläche zum Schließen innerhalb des Modals, mit Bootstrap 3 gleich verhält. Ich fand ein Skript, das tut, aber es gibt ein Problem. Sagen wir, ich beginne mit google.com, gehe zu dieser modalen Seite und drücke dann auf "Modal!" button, dann drücke den browser back button, es schließt das modal, wenn ich den back button erneut drücke, bringt es mich zurück zu google.com (alles ist gut). Aber diesmal, wenn ich die modale Seite öffne und das Modal mit der Schaltfläche "Schließen" schließe. Aber jetzt müsste ich zweimal den Zurück-Knopf drücken, um zu google.com zurückzukehren. Wenn ich das Modal öffne und schließe mit der Schließen-Taste innerhalb von Modal für etwa 10x. Ich habe festgestellt, dass ich den Browser 10 Mal drücken muss, um zur google.com-Seite zurückzukehren. Wie behebe ich dieses Problem?

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

fand ich eine Lösung. Fühlen Sie sich frei, irgendwelche anderen eleganten Lösungen bekannt zu geben.

$('#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

Sie können den folgenden Code verwenden, um nur die Beseitigung der modalen Fenster zu erhalten, das offen ist und nicht zufällig auf die vorherige Seite des Browsers zu bewegen.

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

Answer 3

Auf Knopfdruck erscheint das Popup-Fenster.

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

Vor Ort ändern würde es versteckt erhalten:

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