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&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>