Symfony Bootstrap Modal只显示背景，不显示模态本身

kyvafyod 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(1)|浏览(144)

遵循本教程：https：//symfonycasts.com/screencast/stimulus/modal-form#play，我目前正在开发一个模态，我将在applying中注入一个symfony表单。我使用webpack和带有data-action的刺激控制器来打开我的modal，不幸的是它只显示了modal的背景，而不是modal本身。我在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>

© 2018 - 2019 www.marticle.com版权所有并保留所有权利'Editer un produit 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);
}

提前感谢您提供的帮助。

twitter-bootstrap

来源：https://stackoverflow.com/questions/77221027/symfony-bootstrap-modal-only-showing-backdrop-not-the-modal-itself

1条答案

按热度按时间

esbemjvw1#

好了，我找到了解决方案，我的modal是在我的产品列表的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',}) }}

谢谢你们的帮助。

赞(0）回复(0）举报 2023-10-14

我来回答

Symfony Bootstrap Modal只显示背景，不显示模态本身

1条答案

相关问题

热门标签

最新问答