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

发布时间：2020-12-17 21:30:37 所属栏目：安全来源：网络整理

导读：下面的代码显示了一个按钮,当我点击时将我路由到我看到帖子的页面. 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 我

下面的代码显示了一个按钮,当我点击时将我路由到我看到帖子的页面.

<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内容.

解决方法

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

如果模态中只有文本,则将空模式放入主布局并用变量填充.

如果某个表单或某些内容确实应该来自其他视图,请使用ajax将其放入模态中.

编辑

AJAX解决方案：

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

还要在你的身体里放一个空模态.稍后您将使用您使用AJAX获得的HTML填充它.

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')
    }
});

查找按钮上的click事件,从请求的url(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并将其放入原始模态中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!