Laravel:将href链接从一个视图传递到另一个视图。特别是模态社交分享按钮

时间:2017-09-18 15:48:03

标签: javascript php jquery bootstrap-modal laravel-5.4

我被社交媒体分享按钮困住了。我想传递链接,从一个视图(一个href标签)到另一个视图,有一个带有社交网络按钮的模态div。更具体地说,我有一个名为/ posts的页面,其中显示了许多帖子,并在每个卷轴上按js加载。所以这些帖子在标签上有唯一的ID。所以我希望得到以下结果:将该视图中的href传递到另一个视图,当用户单击同时返回带有社交网络按钮的模式的按钮时调用该视图。最后应该将href传递给那些按钮。 在这种情况下,每次用户点击共享按钮时,模式都会打开。这些按钮应该在社交网络上发布特定帖子href链接。

  

下面是每个帖子标题上的分享按钮图片   显示在页面中。

enter image description here

<a data-href="/posts/{{$post->id}}" data-toggle="modal" data-target="#myModal">


  

在由onClick函数调用的模式弹出窗口之后,在js中显示社交按钮。

enter image description here

    <div class="modal-body">
        <div class="col-md-6">
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share facebook" role="button"><i class="fa fa-facebook" aria-hidden="true"></i>
Facebook</a>
            </div>
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share google" role="button"><i class="fa fa-google-plus" aria-hidden="true"></i>
Google+</a>
            </div>
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share pinterest" role="button"><i class="fa fa-pinterest" aria-hidden="true"></i>
Pinterest</a>
            </div>
        </div>

        <div class="col-md-6 last">
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share viber" role="button"><img style="margin-top: -3px;" src="../fonts/viber1400.png"></i>
Viber</a>
            </div>
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share tumblr" role="button"><i class="fa fa-tumblr" aria-hidden="true"></i>
Tumblr</a>
            </div>
            <div class="col-md-12 btn-list">
                <a href="#" class="btn btn-primary btn-share twitter" role="button"><i class="fa fa-twitter" aria-hidden="true"></i>
Twitter</a>
            </div>
        </div>
      </div>

1 个答案:

答案 0 :(得分:0)

在这种情况下,您需要从远程URL调用引导程序模型。例如:

/帖子页

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <ul class="nav navbar-nav" id="menu">
    <li><a href="/posts/modal/{{$post->id}}" data-toggle="modal" data-target="#myModal">Edit/Delete</a>
    </li>
  </ul>
  <div id="myModal" class="modal fade text-center">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>
</body>

</html>

模态内容的远程laravel视图:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
  <!-- get the post details by using the post id that is passed in url -->
  <p>Social media to this post</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

要生成社交链接,您可以使用social link generator,这非常有用。