bootstrap 3 zamknij Modal po naciśnięciu przycisku wstecz przeglądarki

Question

Po prostu chcę utworzyć stronę modalną, która zachowuje się tak samo albo poprzez naciśnięcie przycisku wstecz przeglądarki, albo przycisku zamykania wewnątrz modalu, za pomocą bootstrap 3. Znalazłem skrypt, który to robi, ale jest problem. załóżmy, że zaczynam z google.com, przejdź do tej modalnej strony, a następnie naciśnij "Modal!" przycisk, a następnie naciśnij przycisk Wstecz przeglądarki, zostanie zamknięty modalny, jeśli ponownie wcisnę przycisk Wstecz, zabierze mnie z powrotem do witryny google.com (wszystko jest w porządku). Ale tym razem, jeśli otworzę modalną stronę i zamknę modal, użyję zamiast tego przycisku "zamknij". Ale teraz musiałbym dwukrotnie nacisnąć przycisk Wstecz, aby wrócić do witryny google.com. Jeśli otworzę i zamknę modal za pomocą przycisku zamykania wewnątrz modalu na 10x. Zauważyłem, że muszę ponownie nacisnąć przycisk przeglądarki 10 razy, aby wrócić do strony google.com. Jak rozwiązać ten 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

znalazłem rozwiązanie. Zachęcamy do zamieszczania wszelkich innych eleganckich rozwiązań.

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

Możesz użyć poniższego kodu, aby pozbyć się otwartego okna modalnego i przypadkowo nie przechodzić na poprzednią stronę przeglądarki.

//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

Pojawi się okno z przyciskiem myszy.

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

Na zmianę lokalizacji byłoby się schować:

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