求助：Laravel中通过路由调用模态框，不知需引入哪个脚本？

你的按钮通过data-ajax-popup="true"和data-url标记了需要Ajax加载内容并弹出模态框，需要配合jQuery和Bootstrap 5（因为用到了data-bs-toggle），加上自定义脚本实现，具体步骤如下：

1. 确保依赖已引入 #

在页面的</body>前引入jQuery和Bootstrap的JS文件（如果还没引入）：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 添加模态框容器 #

在页面任意位置（比如index.blade.php末尾）添加一个隐藏的Bootstrap模态框容器：

<div class="modal fade" id="ajaxModal" tabindex="-1" aria-labelledby="ajaxModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ajaxModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="ajaxModalBody">
                <!-- Ajax加载的内容会填充到这里 -->
            </div>
        </div>
    </div>
</div>

3. 编写核心处理脚本 #

添加自定义jQuery脚本，监听带有data-ajax-popup属性的元素点击事件，实现Ajax加载和模态框显示：

$(document).ready(function() {
    // 监听ajax弹窗按钮点击
    $('[data-ajax-popup="true"]').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转

        let url = $(this).data('url');
        let size = $(this).data('size') || 'md'; // 默认中等尺寸
        let title = $(this).attr('title') || '';

        // 根据尺寸设置模态框的类
        let modalDialogClass = '';
        switch(size) {
            case 'sm': modalDialogClass = 'modal-sm'; break;
            case 'lg': modalDialogClass = 'modal-lg'; break;
            case 'xl': modalDialogClass = 'modal-xl'; break;
        }
        $('#ajaxModal .modal-dialog').removeClass('modal-sm modal-lg modal-xl').addClass(modalDialogClass);

        // 设置模态框标题
        $('#ajaxModalLabel').text(title);

        // 发起Ajax请求加载内容
        $.ajax({
            url: url,
            type: 'GET',
            beforeSend: function() {
                // 加载中提示
                $('#ajaxModalBody').html('<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>');
            },
            success: function(response) {
                // 将返回的视图内容填充到模态框
                $('#ajaxModalBody').html(response);

                // 初始化模态框并显示
                let modal = new bootstrap.Modal(document.getElementById('ajaxModal'));
                modal.show();
            },
            error: function(xhr) {
                // 处理权限错误或其他请求失败情况
                if(xhr.status === 403 || xhr.responseJSON?.error) {
                    $('#ajaxModalBody').html('<div class="alert alert-danger">' + (xhr.responseJSON?.error || '权限不足或请求失败') + '</div>');
                    let modal = new bootstrap.Modal(document.getElementById('ajaxModal'));
                    modal.show();
                } else {
                    alert('加载失败，请稍后重试');
                }
            }
        });
    });
});

4. 调整role.create视图 #

控制器返回的role.create视图会被填充到模态框中，因此不需要完整的HTML结构（比如不要<html>、<body>标签），只保留表单或内容部分，示例如下：

<!-- role/create.blade.php -->
<form method="POST" action="{{ route('roles.store') }}">
    @csrf
    <div class="mb-3">
        <label for="name" class="form-label">{{ __('Role Name') }}</label>
        <input type="text" class="form-control" id="name" name="name" required>
    </div>
    <div class="mb-3">
        <label class="form-label">{{ __('Permissions') }}</label>
        <div class="row">
            @foreach($permissions as $id => $name)
                <div class="col-md-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $id }}" id="permission-{{ $id }}">
                        <label class="form-check-label" for="permission-{{ $id }}">{{ $name }}</label>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="text-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
        <button type="submit" class="btn btn-primary">{{ __('Create Role') }}</button>
    </div>
</form>

关键说明 #

• data-size属性控制模态框尺寸，脚本会根据这个值给模态框容器添加对应的Bootstrap类
• Ajax请求会获取data-url指向的路由内容（即控制器create方法返回的视图），并填充到模态框中
• 脚本处理了加载状态和错误情况，比如权限不足时会显示错误提示

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