使用 Ajax 时，Laravel 中的 Modal Flowbite 无法关闭

Question

我使用 Flowbite 制作一个模态并使用 Ajax 显示它，因为我想将数据传递到模态主体内部。该模式工作正常，但按下关闭按钮时无法关闭。 这是我的代码：

App.js：

import "flowbite";

按钮触发：

<button onclick="detail('{{ $id }}')" data-modal-toggle="viewProduk" type="button"
    class="rounded-l-lg border border-gray-200 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-blue-500">
    <i class="fa-solid fa-eye"></i>
</button>
<div id="view" class="hidden"></div>

阿贾克斯：

    <script>
            function detail(id) {
                var id = id;
                var url = "{{ route('produk.show', ':id') }}";
                url = url.replace(':id', id);
                $.ajax({
                    type: "get",
                    url: url,
                    success: function(response) {
                        if (response.data) {
                            $('#view').html(response.data).show();
                            const $targetEl = document.getElementById('viewProduk');
                            var options = {
                                closable: true,
                            };
                            var modal = new Modal($targetEl, options);
                            modal.toggle();
                        }
                    }
                });
            }
  </script>

控制器：

public function show($id)
{
    $view = view('produk.partials.modal_viewproduk',[
        'produk' => Produk::findOrFail($id),
    ])->render();
    return response()->json([
        'data' => $view
    ]);
}

modal_viewproduk.blade.php：

<x-modal idName="viewProduk" title="Detail Produk">
    <div id="content">
        {{ $produk->kode_brg }}
        {{ $produk->nama_brg }}
    </div>
    <div>
        <button class="bg-indigo-500" data-modal-hide="viewProduk">Close</button>
    </div>
</x-modal>

模态组件：

@props(['idName', 'title'])

<div id="{{ $idName }}" tabindex="-1" aria-hidden="true"
    class="fixed top-0 left-0 right-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full overflow-y-auto overflow-x-hidden p-4 md:inset-0">
    <div class="relative max-h-full w-full max-w-2xl">
        <!-- Modal content -->
        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white lg:text-2xl">
                    {{ $title }}
                </h3>
                <button type="button"
                    class="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
                    data-modal-hide={{$idName}}>
                    <svg class="h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="space-y-6 p-6">
                {{ $slot }}
            </div>

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

模态展示是这样的。当我单击 X 按钮或关闭按钮时，它不会关闭。但是当我单击背景时，模式会关闭。 有人可以帮助我吗？ 谢谢你。

Answer 1

这就是我解决问题的方法：

const modal = FlowbiteInstances.getInstance('Modal', 'viewProduk');
modal.hide()

;