Capture link and title, and move to a single modal

Navigation
1

A list of 5 articles, with different links and titles, each with a Share link that opens a modal, where you have four buttons to share on social media. To be shared it is necessary to have the post link. I think it would be disastrous, putting the modal in a php loop, thus creating a specific modal for each listed article. What I want is to just keep a modal, and pass the value of the link / title of the post to it, with javascript through the Share button

PS: This is for a project in wordpress, so each article listed has, ID tags. id="post-150" , id="post-50" , id="post-650"

Example 

jQuery(function($) {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });

    
});
.post-article {
    border-bottom: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
}
.post-article:nth-child(odd) {
    background: #eee;
}

.post-article:nth-child(even) {
    background: #fafafa;
}
.popup-modal-dismiss {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

        <link rel="stylesheet" type="text/css" href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=1.1.0">
<script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=1.1.0"></script><divclass="main-articles">

<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-01">Post 01 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-02">Post 02 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-03">Post 03 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-04">Post 04 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-05">Post 05 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>
</div>

<div id="test-modal" class="white-popup-block mfp-hide">
    <p>Compartilhar Post</p>

    <div><b>Título do post: </b></div>

    <!-- Facebook -->
    <a href="http://www.facebook.com/sharer.php?u=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/facebook.png"alt="Facebook" />
    </a>
    
    <!-- Google+ -->
    <a href="https://plus.google.com/share?url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/google.png"alt="Google" />
    </a>
    
    <!-- LinkedIn -->
    <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/linkedin.png"alt="LinkedIn" />
    </a>

    <!-- Twitter -->
    <a href="https://twitter.com/share?url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/twitter.png"alt="Twitter" />
    </a>

    <p><a class="popup-modal-dismiss" href="#">Close</a></p>
</div>
    
asked by anonymous 21.03.2018 / 16:09

1 answer

1

This code does what you want, puts the title in the modal and assigns the appropriate links to each social network icon: 

$('.popup-modal').on('click', function(){

   var comp = $(this).closest("article").find("h1 a"),
       url_ = comp.attr("href"),
       tit_ = comp.text();

   $("#test-modal div b").text('Título do post: '+tit_);

   var fb_link = "http://www.facebook.com/sharer.php?u="+url_, // facebook
       gp_link = "https://plus.google.com/share?url="+url_, // google+
       li_link = "http://www.linkedin.com/shareArticle?mini=true&amp;url="+url_, // linkedin
       tw_link = "https://twitter.com/share?url="+url_+"&text="+tit_; // twitter

   $("#test-modal a").each(function(){

      var href = $(this).attr("href");

      if(~href.indexOf("facebook")) $(this).attr("href", fb_link);
      if(~href.indexOf("google")) $(this).attr("href", gp_link);
      if(~href.indexOf("linkedin")) $(this).attr("href", li_link);
      if(~href.indexOf("twitter")) $(this).attr("href", tw_link);

   });

});

I could not reproduce in the snippet here, so follow example in JSFiddle .

    
21.03.2018 / 17:35
insert in the table only the line that receives value in the date column Mutator as Default Attribute