如何实现Tailwind CSS(Flowbite)模态框页面加载时自动弹出？

使用Tailwind CSS（Flowbite）框架开发时，希望模态框在用户进入页面时自动弹出，而非等待用户点击按钮触发。尝试过以下jQuery方法模拟点击，但未生效：

$("#mybutton").click();
$(".mybutton").trigger('click');

触发按钮及模态框代码如下：

<button data-modal-target="crud-modal" id="mybutton" data-modal-toggle="crud-modal" class="mybutton" type="button">
    Toggle modal
</button>

<div id="crud-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    Create New Product
                </h3>
                <button type="button">
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            
        </div>
    </div>
</div>

Flowbite自带模态框控制API，无需模拟按钮点击，以下是可行方案：

方案一：使用Flowbite官方API（推荐） #

1. 确保Flowbite JS已正确引入并初始化，在DOM加载完成后调用模态框的show方法：

document.addEventListener('DOMContentLoaded', function() {
    // 获取模态框DOM元素
    const modalEl = document.getElementById('crud-modal');
    // 创建模态框实例
    const modal = new flowbite.Modal(modalEl);
    // 显示模态框
    modal.show();
});

如果用jQuery，可放在ready回调中：

$(document).ready(function() {
    const modal = new flowbite.Modal($('#crud-modal')[0]);
    modal.show();
});

方案二：直接修改类名显示 #

若不想使用API，可直接移除模态框的hidden类并更新ARIA属性：

document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('crud-modal');
    modal.classList.remove('hidden');
    modal.setAttribute('aria-hidden', 'false');
});

注意：这种方式不会触发Flowbite内置的模态框事件，仅适合简单场景。

关键注意点 #

• 必须在DOM加载完成后执行代码，避免找不到模态框元素
• 确保页面已正确引入Flowbite的JavaScript文件（CDN或本地文件）

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