同一页面复用Thymeleaf模态框片段时参数重复问题求助

问题根源 #

1. 模态框ID重复：所有调用的模态框片段都使用固定的id="Modal_Card"，HTML中ID必须唯一，Bootstrap触发模态框时只会匹配页面中第一个拥有该ID的元素，导致无论点击哪个卡片都显示第一个模态框的内容。
2. 第二个卡片的href属性缺少#前缀，无法正确指向模态框ID。

解决方案 #

修改模态框片段生成唯一ID，同时让卡片的触发目标对应到各自的模态框ID：

1. 修改模态框片段代码 #

<div th:fragment="Modal_Card(content, headline, modalId)" class="modal fade" tabindex="-1"
     aria-labelledby="modalTitle-${modalId}"
     aria-hidden="true" th:id="${modalId}">

    <!-- Modal -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" th:id="modalTitle-${modalId}" th:text="${headline}"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <p th:text="${content}"></p>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

2. 修改调用页面的卡片代码 #

<!-- First Card -->
<div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
    <div th:insert="fragments/Modal_Card :: Modal_Card('Text 1', 'Headline1', 'Modal_Card_1')"></div>
    <div class="card shadow text-white h-100" data-bs-toggle="modal" href="#Modal_Card_1" style="background-color: var(--own-green-2); border-radius: 1rem">
        <div class="card-body px-5 h-100">
            <div class="row">
                <div class="col-auto">
                    <i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
                </div>
                <div class="col mt-auto mb-auto">
                    Headline1
                </div>
            </div>
            <div class="row pt-3 pb-3">
                <hr class="mb-3">
                Text1
            </div>
        </div>
    </div>
</div>

<!-- Second Card -->
<div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
    <div th:insert="fragments/Modal_Card :: Modal_Card('Text 2', 'Headline2', 'Modal_Card_2')"></div>
    <div class="card shadow text-white h-100" data-bs-toggle="modal" href="#Modal_Card_2" style="background-color: var(--own-green-2); border-radius: 1rem">
        <div class="card-body px-5 h-100">
            <div class="row">
                <div class="col-auto">
                    <i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
                </div>
                <div class="col mt-auto mb-auto">
                    Headline2
                </div>
            </div>
            <div class="row pt-3 pb-3">
                <hr class="mb-3">
                Text2
            </div>
        </div>
    </div>
</div>

修改说明 #

• 模态框片段新增modalId参数，动态设置模态框的id和标题的aria-labelledby属性，确保每个模态框ID唯一。
• 每个卡片调用片段时传入不同的modalId（如Modal_Card_1、Modal_Card_2），同时卡片的href指向对应的#modalId。
• 修正了第二个卡片href缺少#的问题。

内容的提问来源于stack exchange，提问作者Joeker99