动态Bootstrap模式的深层链接

好的..所以我在这里看两种方法并试图弄清楚如何将它们合二为一 .

首先，我们有通过数据属性动态填充的模态 . 我有一个从后端数据库加载的列表，并使用ID号填充数据属性 releaseid . 然后，当模式启动时，它会获取该ID号，对Java Action执行ajax调用，该Java Action会抓取内容并填充模态的主体 .

当模态关闭时， Headers 和正文将被清空，以便为下一个模态腾出空间 .

HTML:

<c:forEach var="pRelease" items="${prList}">
<li><a href="#" data-toggle="modal" data-target="#prDetailModal" data-releaseid="${pRelease.releaseId}">${pRelease.heading}</a></li>
</c:forEach>

<div class="modal fade" id="prDetailModal" tabindex="-1" role="dialog" aria-labelledby="prDetailModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title text-center"></h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

          </div>
        </div>
      </div>
    </div>

JS:

$('#prDetailModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var releaseId = button.data('releaseid');
                var modal = $(this);

                $.ajax({
                    url: "viewpressreleasedetail.action?releaseid=" + releaseId,
                    dataType: "json",
                    success: function(data) {
                        modal.find('.modal-title').text(data.heading);
                        if (data.sub_heading){
                            var subHeading = data.sub_heading;
                            modal.find('.modal-body').append("<h5 class='text-center'>"+subHeading+"</h5>");
                        }
                        if (data.cover_image){
                            var coverImage = "https://s3.amazonaws.com/halleonard-coverimages/"+data.cover_image;
                            modal.find('.modal-body').append("<p class='text-center'><img class='img-fluid' src="+coverImage+"></p>");
                        }
                        var content = data.content;
                        modal.find('.modal-body').append(content);
                    }
                }); 
            });

            $('#prDetailModal').on('hidden.bs.modal', function (event) {
                var modal = $(this);
                modal.find('.modal-title').text();
                modal.find('.modal-body').empty();
            });

其次，我想使用一个深层链接脚本，这样当启动模式时，它会更改浏览器窗口中的URL并添加一个哈希值，当用户返回带有散列URL的页面时，PLUS会自动加载模式加载适当的动态内容 .

JS Example (I'm posting an example I am using to get deep linking in a Bootstrap Tabbed Content):

let url = location.href.replace(/\/$/, "");

            if (location.hash) {
                const hash = url.split("#");
                $('#eventsTab a[href="#'+hash[1]+'"]').tab("show");
                url = location.href.replace(/\/#/, "#");
                history.replaceState(null, null, url);
                setTimeout(() => {
                    $(window).scrollTop(0);
                    $("#eventsTabContent").addClass("loaded");
                }, 400);
            } else {
                setTimeout(() => {
                    $("#eventsTabContent").addClass("loaded");
                    $("#conventions-tab").addClass("active");
                }, 400);
            }

            $('a[data-toggle="tab"]').on("click", function() {
                let newUrl;
                const hash = $(this).attr("href");
                if(hash == "#conventions") {
                    newUrl = url.split("#")[0];
                } else {
                    newUrl = url.split("#")[0] + hash;
                }
                history.replaceState(null, null, newUrl);
            });

有谁知道如何将这两者结合起来，以便它能按预期工作？