twitter-bootstrap - Bootstrap 3.x : how to have url change upon clicking modal trigger?

Question

使用 Bootstrap v3.3.5

我有一个使用 URL domain.com/companies 的网页

这是我对该网页中模式的触发。

<a href="#modal-add-company" class="btn btn-effect-ripple btn-effect-ripple btn-success" data-toggle="modal"><i class="fa fa-plus"></i> New Company</a>

这将成功触发此模式

<div id="modal-add-company" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">

但是，网址不会更改为 domain.com/companies#modal-add-company
网址 domain.com/companies#modal-add-company 也没有实际上在重新加载时触发模态。

我需要做什么才能拥有以下内容:

将网址更改为 domain.com/companies#modal-add-company每当我触发模态并显示模态时，

如果我直接输入网址 domain.com/companies#modal-add-company ，模态显示

Answer 1

使用 jQuery 这可能是一个可行的解决方案

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash = $(this).attr('href');
   });
});

假设您有一个触发器来关闭模态，如下所示:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

您可以将其添加到上面的代码块下方:

$('button[data-dismiss="modal"]').click(function(){
     var original = window.location.href.substr(0, window.location.href.indexOf('#'))
     history.replaceState({}, document.title, original);
 });

假设您希望退出按钮仍然能够关闭模式，并且还更改 url，整个代码块将如下所示:

    $(window.location.hash).modal('show');
    $('a[data-toggle="modal"]').click(function(){
        window.location.hash = $(this).attr('href');
    });

    function revertToOriginalURL() {
        var original = window.location.href.substr(0, window.location.href.indexOf('#'))
        history.replaceState({}, document.title, original);
    }

    $('.modal').on('hidden.bs.modal', function () {
        revertToOriginalURL();
    });

归功于 https://stackoverflow.com/a/13201843/80353关于如何使用模态关闭事件。