Question

在某种程度上，我需要显示成功（或不成功）消息，我喜欢模式，因为它们冻结了（主视图）后面的所有内容并显示带有某种消息的小盒子。我已经看到了很多示例，但是大多数示例都在每页显示这些“警告”框，我认为我应该有一个视图（称为模式），每次我需要显示它时，我只需传递适当的参数，该视图就会出现。

我做了什么：

创建了一个称为模式的视图。
使用将接收参数的方法创建了一个控制器。

创建到控制器的路由。

    $.ajax({
        method: 'POST', 
        url: '/angariacoes/insertImovel',
        dataType: "json",
        data: {"_token": "{{ csrf_token()
        }}",values,eachImage,eachImageThumb},
        success: function(response){ 
            window.location.href='/popup/popup';
        },
        error: function(jqXHR, textStatus, errorThrown) { 
        }
    });

但是现在，我如何显示该视图（具有boostrap模态代码）作为模态？有人吗？

谢谢，问候

Answer 1

在模态主体中放置一个div，然后您可以将视图作为响应返回：

$.ajax({
        method: 'POST', 
        url: '/angariacoes/insertImovel',
        dataType: "json",
        data: {"_token": "{{ csrf_token()
        }}",values,eachImage,eachImageThumb},
        success: function(response){ 
            $('#myAjaxTarget').html(response);
            $('#myModal').modal('show');
        },
        error: function(jqXHR, textStatus, errorThrown) { 
        }
    });

控制器：

return view('my_view', compact($data));

只需确保实际的模态部分在您希望弹出窗口位于的视图上即可。创建具有模态内容的单独刀片。

所以我有the_main_view.blade.php，并且在其中放了：

<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="">Modal Title</h4>
            </div>
            <div class="modal-body" id="myAjaxTarget">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我们有另一个视图my_view.blade.php，该视图通过上述Controller方法返回：

<span>Literally any HTML</span>

因此，ajax调用的响应只是my_view，您可以用它替换#myAjaxTarget的HTML内容。因此，最终模态将如下所示：

<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="">Modal Title</h4>
            </div>
            <div class="modal-body" id="myAjaxTarget">
                <span>Literally Anything</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

然后使用$（'＃myModal'）。modal（'show'）方法显示哪个。

Laravel在ajax成功后显示带有条件的子视图

1 个答案: