JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://experiments.hostzi.com/socialsharebutton/css/avgrund.css">
<link rel="stylesheet" href="http://experiments.hostzi.com/socialsharebutton/css/style.css">
<link rel="stylesheet" href="http://experiments.hostzi.com/socialsharebutton/css/anylinkmenu.css">
<script src="http://experiments.hostzi.com/socialsharebutton/js/jquery.avgrund.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css">
</head>
<body>
<div class="container">
<header class="clearfix">
<h1>Social Share buttons<span>with modal popup</span></h1>
</header>
<section class="main clearfix">
<div class="fleft">
<p>The Modal pop up is generated by <a href="http://labs.voronianski.com/jquery.avgrund.js/">Avgrund jQuery plugin</a></p>
</div>
<div class="buttons">
<a href="#" id="show" class="button left">Share the goodness</a>
</div>
</section>
</div><!-- /container -->
JavaScript
$( document ).ready(function() {
$('#show').avgrund({
height: 200,
holderClass: 'custom',
showClose: true,
showCloseText: 'Close',
enableStackAnimation: true,
onBlurContainer: '.container',
template: '<iframe width="560" height="315" src="https://www.youtube.com/embed/0e_el0Ut-tw" frameborder="0" allowfullscreen></iframe>
});
});
function popitup(url) {
newwindow=window.open(url,'name','height=400,width=500');
if (window.focus) {newwindow.focus()}
return false;
}