JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<p>A lot of content</p>
<p> В субботу утром господин Пепперминт сидел у себя в комнате и ждал. Чего он ждал? Этого он и сам точно не мог бы сказать.</p>
<p>Зачем же  тогда он  ждал?  Вот  это  объяснить уже проще.  Правда,  нам придется начать рассказ с самого понедельника. А  в понедельник в дверь комнаты господина Пепперминта вдруг постучали. Просунув голову в щель, госпожа Брюкман объявила:</p>
<p>- Господин Пепперфинт,  к  вам гость!  Проследите только,  чтобы он  не курил в комнате:  от этого портятся занавески!  Пусть не садится на кровать! Для чего я вам стул дала, как вы думаете?</p>
     Госпожа  Брюкман  была  хозяйкой  дома,  где  снимал  комнату  господин
Пепперминт.  Когда она  сердилась,  она всегда называла его "Пепперфинт".  А
сейчас хозяйка сердилась, потому что к нему пришел гость.
     <p>Гость,  которого в  тот  самый  понедельник хозяйка втолкнула в  дверь,
оказался  школьным  приятелем  господина  Пепперминта.   Его   фамилия  была
Понеделькус.  В  подарок  своему  другу  он  притащил  целый  кулек  вкусных
пончиков.</p>
     <p>После понедельника был вторник,  и  в этот день к господину Пепперминту
явился  хозяйский племянник -  спросить,  как  решить задачу по  математике.
Племянник хозяйки был лентяем и второгодником. Господин Пепперминт ничуть не
         удивился его визиту.</p>

<div class="modal-win-wrapper modal-visible">
<div class="modal-win-content">
    <div class="hidden modal-win-header">Подпишись, чтобы не пропустить ничего интересного!</div>
    <div class="modal-item-wrapper">
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
        <div id="vk_groups"></div>
        <script type="text/javascript">
            VK.Widgets.Group("vk_groups", {mode: 0, width: "255", height: "300", color1: 'FFFFFF', color2: '006600', color3: '009900'}, 79107616);
        </script>
    </div>
    <div class="modal-item-wrapper">
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
         ...

CSS

.hidden {
    display: none;
}
.modal-win-wrapper.modal-visible {
    background: rgba(0,0,0, .5);
    position:fixed;
    top:0;
    left:0;
    width:100%
        height:100%;
}
.modal-win-wrapper.modal-visible .modal-win-content {
    background: #FFF;
    margin: 100px auto;
    width: 600px;
}
.modal-win-wrapper.modal-visible .hidden {
    display: block;
}

JavaScript

var mouseOutModal = {
	isShown: false,
	modalWindowSelector: '.modal-win-wrapper',
	modalWindowCloseSelector: '.modal-win-close',
    modalAddClass: 'modal-visible',
	cookieName: 'modalShown', 
	cookieExp: 3
};

mouseOutModal.showModal = function() {
	var ctx = mouseOutModal;
	$(ctx.modalWindowSelector).addClass(ctx.modalAddClass);
	ctx.isShown = true;
	ga('send', {
		'hitType': 'event',
		'eventCategory': 'Socials',
		'eventAction': 'Show-modal',
		'eventLabel': 'onMouseOut',
		'transport': 'beacon'
	});
	//$.cookie(ctx.cookieName, 1, {expires: ctx.cookieExp});
}

mouseOutModal.hideModal = function() {
	var ctx = mouseOutModal;
	$(ctx.modalWindowSelector).removeClass(500);
}


jQuery(document).ready(function() {
	var ctx = mouseOutModal;
	ctx.isShown = 0;//parseInt($.cookie(ctx.cookieName));

	if(!ctx.isShown) {
		$(document).bind('mouseout', function(e) {
			if(e.clientY < 0 && !ctx.isShown) {
				ctx.showModal();
				$(document).unbind('mouseout');
			}
		});
	}

	$(ctx.modalWindowCloseSelector).bind('click', ctx.hideModal);

	// tracking VK
	VK.Observer.subscribe("widgets.groups.joined", function f() {
		ga('send', {
			'hitType': 'event',
			'eventCategory': 'Socials',
			'eventAction': 'VKontakte',
			'eventLabel': 'Join group',
			'transport': 'beacon'
		});
		console.log('Vkontakte Join');
	});


	// tracking FB
	window.fbAsyncInit = function() {
		FB.Event.subscribe('edge.create', function(targetUrl) {
			ga('send', {
				'hitType': 'event',
				'eventCategory': 'Socials',
				'eventAction': 'Facebook',
				'eventLabel': 'Like',
				'transport': 'beacon'
			});
			console.log('Facebook Like');
		});

		FB.Event.subscribe('message.send', function(targetUrl) {
			ga('send', {
				'hitType': 'event',
				'eventCategory': 'Socials',
				'eventAction': 'Facebook',
				'eventLabel': 'Share',
				'transport': 'beacon'
			});
			console.log('Facebook Share');
		});
	};

});
// tracking G+
function plusone_share( obj ) {
	console.log(obj);
	ga('send',...