bootstrap 3 close Modal khi nhấn nút quay lại trình duyệt

Question

Tôi chỉ muốn tạo một trang phương thức hoạt động giống nhau hoặc nhấn nút quay lại trình duyệt hoặc nút đóng bên trong phương thức, sử dụng bootstrap 3. Tôi tìm thấy một tập lệnh thực hiện điều đó, Nhưng có một vấn đề. giả sử tôi bắt đầu với google.com, truy cập trang phương thức này, sau đó nhấn "Modal!" nút, sau đó nhấn nút quay lại trình duyệt, nó sẽ đóng phương thức, nếu tôi nhấn nút quay lại lần nữa, nó sẽ đưa tôi trở lại google.com (tất cả đều tốt). Nhưng lần này, nếu tôi mở trang phương thức và đóng phương thức bằng nút "đóng" thay vào đó. Nhưng bây giờ, tôi sẽ phải nhấn nút quay lại hai lần để quay lại google.com. Nếu tôi mở và đóng các phương thức với nút đóng bên trong của phương thức cho giống như 10x. Tôi thấy rằng tôi phải đẩy nút quay lại trình duyệt thêm 10 lần nữa để quay lại trang google.com. Cách khắc phục sự cố này? 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

Tôi tìm thấy một giải pháp. Vui lòng đăng bất kỳ giải pháp thanh lịch nào khác.

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

Bạn có thể sử dụng mã sau để thoát khỏi cửa sổ phương thức đang mở và không vô tình di chuyển đến trang trước của trình duyệt.

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

Trên cửa sổ bật lên, nhấp vào nút sẽ xuất hiện.

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

On thay đổi vị trí nó sẽ bị ẩn:

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