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

您可以使用数据属性来执行此操作; 我的例子是（在Laravel 5.4中使用jquery 3）：我有一个用户列表，在每个用户记录的最后我有2个按钮编辑＆amp;删除;在删除时，我必须打开一个显示消息的模式，通知我删除或取消激活（通过每个用户操作的路由）;所以我这样做了：

在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 for it：

        // 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("-&nbsp;" + $current_user_data.first_name + " " + $current_user_data.last_name + "&nbsp;-");
        $('[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令牌传输：

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

当然，您还必须在应用的部分中添加带有令牌的元标记：

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

Answer 2

有几种方法可以完成它。但请不要通过iframe解决。

如果模态中只有文本，请将空模式放入主布局并用变量填充。

如果某个表单或其他内容真的应该来自其他视图，请使用ajax并将其放入模式中。

修改

AJAX解决方案：

将CSRF token放入您的DOM，以便您可以从任何地方访问它。您可能需要POST次请求。默认情况下，Laravel不接受没有此令牌的POST请求。

还将空模式放入body。之后，您将使用HTML填写AJAX。

main.blade.php

<!DOCTYPE html> <html lang="en"> <head> ... <meta name="_token" content="{{ csrf_token() }}" /> </head> <body> ... <div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"></div> </div> </div> </div> <script src="custom.js"></script> </body> </html>

修改您的HTML：

<button data-path="{{ route('post.show',$post->id) }}" class="btn btn-info btn-xs load-ajax-modal" role="button" data-toggle="modal" data-target="#dynamic-modal"> <span class="glyphicon glyphicon-eye-open"></span> Show </button>

设置AJAX请求的标头

custom.js

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

在您的按钮上查找点击事件，从请求的网址（data-path属性）获取HTML并将其放入您的模态体中。

$('.load-ajax-modal').click(function(){ $.ajax({ type : 'GET', url : $(this).data('path'), success: function(result) { $('#dynamic-modal div.modal-body').html(result); } }); });

所有这些都没有经过测试，只是一个概念;）

<强> 2。修改

如果您想要替换多个模态体，您还可以采用不同的方法来解决它：

使用/为不同的内容返回JSON对象
返回您需要的DOM-Node并将其放入原始模态中。

Laravel在模态窗口中打开一条路线

2 个答案:

修改