2017-09-18 5 views
0

私はソーシャルメディアの共有ボタンに固執しました。あるビュー(hrefタグ)から別のビューにリンクを渡して、ソーシャルネットワークボタンがあるモーダルのdivにしたいと思います。より具体的には、私はそこに表示されている多くのポストと各スクロールのjsによってロードされた/ postsというページを持っています。だから、それらの投稿はタグに一意のIDを持っています。ですから、私は次のことを達成したいと思います:そのビューからのhrefを、ユーザがソーシャルネットワークボタンでモーダルを返すボタンをクリックしたときに呼び出される別のビューに渡します。最後に、これらのボタンにhrefが渡されるはずです。 この場合、ユーザーが共有ボタンをクリックするたびに、モーダルが開きます。これらのボタンは、ソーシャルネットワークに特定の投稿のhrefリンクを投稿する必要があります。以下はLaravel:あるビューのhrefリンクを別のビューに渡します。モーダルソーシャルシェアボタンに具体的には

ヘッダーのページに表示されている各ポスト の上の共有ボタンについてのイメージがあります。ソーシャルボタンを表示するjsの中のonClick関数によって呼び出されることモーダルポップ・アップ、後

enter image description here

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


。あなたは、リモートのURLからブートストラップモデルを呼び出す必要があります。この場合

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> 

答えて

0

。例:モーダルコンテンツの

/ポスト・ページ

<!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とその本当に便利を使用することができます社会的なリンクを生成します。

関連する問題