如何从 url 中删除 #/modal-about答案

【问题标题】：How to remove #/modal-about from url如何从 url 中删除 #/modal-about
【发布时间】：2018-05-08 21:49:31
【问题描述】：

这是Understanding how data-dismiss attribute works in Bootstrap的后续问题。

我们在布局页面中使用这样的代码实现了完全相同的实现：

<!-- about modal -->
    <div id="modal-about" class="modal fade" ng-controller="aboutController">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                            data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">@Labels.aboutTitle</h4>
                </div>

如果我在打开关于表单然后关闭它时打开了其他页面，则一切正常。但是，如果我只是启动我的应用程序并转到 About 菜单并打开它并关闭它，我在关闭它后仍然在 URL 中使用 modal-about。问题是 - 如何连接到 data-dismiss="modal" 以从 URL 中删除它？

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案1】：

您将希望利用 hidden.bs.modal 事件并在那里更新 URL：

$('#modal-about').on('hidden.bs.modal', function () {
    window.location.hash = '';
});

https://getbootstrap.com/docs/4.1/components/modal/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash

【讨论】：

它有效，但我需要调整这个解决方案。如果 url 以 modal-about 结尾，我只需要进行更改。换句话说，如果我打开了另一个页面，然后打开模型并关闭，它会删除我有效的 URL 的结尾。
您可以改用String.replace：window.location.hash = window.location.hash.replace('modal-about', '')
好主意。我添加了 endwith 的检查并仅在这种情况下进行了替换。