Uma listagem de 5 artigos, com links e títulos diferentes, cada um deles com um link Compartilhar que abre um modal, onde possui quatro botões para serem compartilhados nas mídias sociais. Para ser compartilhado é necessário ter o link do post. Penso que seria desastroso, colocar o modal em um loop php, criando assim um modal especifico para cada artigo listado. O que eu quero é manter apenas um modal, e passar o valor do link/titulo do post para ele, com javascript através do botão Compartilhar
PS: Isso é para um projeto em wordpress, então cada artigo listado possui,
ID próprias. id="post-150"
, id="post-50"
, id="post-650"
Exemplo
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>
<link rel="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>
<div class="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>