twitter-bootstrap - Laravel 在模态窗口中打开路线

Question

以下代码显示了一个按钮，当我单击该按钮时，我会转到我看到帖子的页面。

<a href="{{ route('post.show',$post->id) }}" 
   class="btn btn-info btn-xs" 
   role="button" 
   data-toggle="tooltip" title="Show">
   <span class="glyphicon glyphicon-eye-open"></span> Show
</a>

我应该怎么做才能在模式对话框窗口中显示路线的内容？
我能够弄清楚如何使用 Bootstrap 数据切换来显示模式对话框，但无法弄清楚如何让路由 html 内容显示在模式中。

Answer 1

您可以使用数据属性来执行此操作；
我的例子是(在带有 jquery 3 的 Laravel 5.4 中):我有一个用户列表，在每个用户记录的末尾我有 2 个按钮编辑和删除；在删除时，我必须打开一个显示消息的模式，通知我删除或停用(带有每个用户操作的路由)；所以我这样做了:

在 td 元素中列出案例:

            <span class="pull-right cursor-pointer" data-toggle="modal" data-target="#modalUserDeletion"
                  data-user="{{ json_encode(
                        [
                            'user_id' => $fos_user->id,
                            'first_name' => $fos_user->first_name,
                            'last_name' => $fos_user->last_name,
                            'user_deletion_route' => route('user.delete', ['id' => $fos_user->id]),
                            'user_deactivation_route' => route('user.deactivate', ['id' => $fos_user->id]),
                        ]
                    ) }}" onclick="displayCurrentUserInfo(this);">
                <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="">
            </span>

模态标记:

   <div class="modal-body popup-user-deletion">
        <div>@lang('translations.user_deletion_modal_explanation')</div><br>
        <div>
            <a class="btn btn-danger" href="#" data-user-delete onclick='return confirm("{{ __('translations.user_delete_message') }}");'>
                <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="" class="svg_image">&nbsp;
                @lang('translations.user_deletion_button')
            </a>
        </div><br>
        <div>@lang('translations.user_deletion_or')</div><br>

        <a href="#" class="deactivate" data-user-deactivate>@lang('translations.user_deactivation_button')</a>
    </div>

js 为它:

        // function used for displaying info in user deletion popup
    function displayCurrentUserInfo($this) {
        var $current_user = $($this);
        var $current_user_data = $current_user.data('user');

        $('[data-user-name]').html("").html("- " + $current_user_data.first_name + " " + $current_user_data.last_name + " -");
        $('[data-user-delete]').attr("href", "").attr("href", $current_user_data.user_deletion_route);
        $('[data-user-deactivate]').attr("href", "").attr('href', $current_user_data.user_deactivation_route);
    }

我建议通过将以下代码放入 resources/assets/js/app.js 中，像这样在全局范围内定义向所有使用 js 请求的 CSRF token 传输:

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});

当然，您还必须在应用程序的部分中包含带有 token 的元标记:

<meta name="csrf-token" content="{!! csrf_token() !!}">