Question

好的。。所以我在这里看两种方法，试图弄清楚如何将它们组合成一个。

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

模式关闭时，标题和正文将被清空以为下一个模式腾出空间。

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的页面时添加一个哈希加号，模态会自动加载适当的动态内容。

JS示例（我正在发布一个示例，用于在Bootstrap选项卡式内容中进行深层链接）

：

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);
            });

有人知道如何将这两者结合起来以使其按需工作吗？

深度链接的动态Bootstrap模式

0 个答案: