Symfony Bootstrap Modal 仅显示背景而不是模态本身

Question

按照本教程：https://symfonycasts.com/screencast/stimulus/modal-form#play，我目前正在开发一个模式，在其中我将在ajax中注入symfony形式。我使用 webpack 和带有数据操作的刺激控制器来打开我的模态，不幸的是它只显示模态的背景，而不是模态本身。我在 stackoverflow 上搜索了主题，但没有找到解决方案。这是我的代码：

带有启动模式的编辑按钮的下拉菜单：

<div {{ stimulus_controller('modal', {formUrl: path('app_product_ora_edit', {'id': product_ora.id})}) }}>
    <button class="dropdown-item" data-action="modal#openModal">
        <i class="bi-pencil-square text-warning dropdown-item-icon">
        </i> Editer
    </button>

{{ include('modal/_modal.html.twig', {modalTitle: '编辑产品 O-RA',}) }}

模态：

<div class="modal fade" tabindex="-1" aria-hidden="true" data-modal-target="modalForm">
    <div class="modal-dialog" id="modalForm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ modalTitle }}</h5>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modalForm"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body" data-modal-target="modalFormBody">
                {{ modalContent|default('Loading...') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modalForm">Cancel
                </button>
                <button type="button" class="btn btn-primary">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

控制器 js 的操作：

static targets = ['modalForm', 'modalFormBody'];
static values = {
    formUrl: String,
}
async openModal(event) {
    this.modalFormBodyTarget.innerHTML = 'Loading...';
    const modalForm = new Modal(this.modalFormTarget);
    modalForm.show();
    console.log(this.formUrlValue);
    this.modalFormBodyTarget.innerHTML = await $.ajax(this.formUrlValue);
}

预先感谢您提供的帮助。

Answer 1

好吧，我找到了解决方案，我的模态是在我的产品列表的 tr 标签中声明的，我必须在 tr 标签之外声明它才能使其工作:

<tr>
                                <td class="text-center text-nowrap">{{ product_ora.id }}</td>
                                <td class="text-center">{{ product_ora.name }}</td>
                                <td class="text-center">{{ product_ora.purchasePrice }}</td>
                                <td class="text-center">{{ product_ora.cataloguePrice }}</td>
                                <td class="text-center">{{ product_ora.commitment }}</td>
                                <td>
                                    <div class="d-flex justify-content-center align-items-center">
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-white btn-sm" id="productOraDropdDown" data-bs-toggle="dropdown" aria-expanded="false">
                                                <span class="d-none d-sm-inline-block me-1">Actions</span>
                                                <i class="bi-chevron-down"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="productOraDropdDown" style="min-width: 13rem;">
                                                {% if is_granted('ROLE_SUPER_ADMIN') %}
                                                    <div data-loader-url-value="{{ path('app_product_ora_edit',
                                                        {'id': product_ora.id}) }}">
                                                        <button class="dropdown-item" data-action="modal#openModal">
                                                            <i class="bi-pencil-square text-warning dropdown-item-icon">
                                                            </i> Editer
                                                        </button>
                                                    </div>
                                                    {{ include('product_ora/_delete_form.html.twig') }}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {{ include('modal/_modal.html.twig', {modalTitle: 'Éditer un produit O-RA',}) }}

谢谢大家的帮助。