JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>
<div id="js-b-popup__wrapper"><!-- Popup will be appear here --></div>

<div>
    <div class="b-show-popup-btn js-b-show-popup-btn">Show popup #1</div>
    <div class="b-show-popup-btn js-b-show-popup-btn">Show popup #2</div>
    <div class="b-show-popup-btn js-b-show-popup-btn">Show popup #3</div>
    <div class="b-show-popup-btn js-b-show-popup-btn">Show popup #4</div>
</div>

<script id="js-popup-tmpl" type="text/x-handlebars-template">
    <div class="b-popup">
        <div class="b-popup__close-btn js-b-popup__close-btn">&times;</div>
        <div class="b-popup__title">{{ title }}</div>
        <div class="b-popup__content">{{ content }}</div>
    </div>
</script>

CSS

.b-popup {
	width: 500px;
	background: #f5f5f5;
	position: fixed;
	top: 100px;
	left: 50%;
	margin-left: -250px;

	box-shadow: rgba(0,0,0, 0.5) 0 0 5px;
	-webkit-box-shadow: rgba(0,0,0, 0.5) 0 0 5px;
}

.b-popup__close-btn {
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: #fff;
	position: absolute;
	right: 5px;
	top: 5px;

	text-align: center;
}

.b-popup__title {
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	background: #333;
	color: #fff;
}

.b-popup__content {
	padding: 20px;
}

JavaScript

var Templates = {

	methods: {

		compile: function (tpl, data) {
			var templateHtml    = Templates.elems[tpl].html(),
				template        = Handlebars.compile(templateHtml),
				html            = template(data);

			return html;
		}

	},

	init: function () {
		this.elems = {
			'popup': $('#js-popup-tmpl')
		};
	}

};

var popupData = [
	{
		title: 'This is title of popup',
		content: 'This is content of popup'
	},
	{
		title: 'Here u can place title for this popup',
		content: 'And here content can be placed'
	},
	{
		title: 'New place for title',
		content: 'Yeah! Content!'
	},
	{
		title: 'Plz place here title',
		content: 'Its just example'
	}
];

var Popup = {

	vars: {
		$currPopup: null,
		currPopupId: null
	},

	methods: {

		showPopup: function () {
			var id = $(this).index();

			if (Popup.vars.currPopupId == id) {
				Popup.vars.$currPopup.show();
			} else {
				Popup.vars.currPopupId = id;
				Popup.vars.$currPopup = $(Templates.methods.compile('popup', popupData[id]));
				Popup.elems.$wrapper.html(Popup.vars.$currPopup);
			}
		},

		hidePopup: function () {
			Popup.vars.$currPopup.hide();
		}

	},

	setMethods: function () {

		this.elems.$showPopupBtn.on('click', function () {
		    Popup.methods.showPopup.bind(this)();
		});

		this.elems.$wrapper.on('click', Popup.elems.closeBtn, function () {
			Popup.methods.hidePopup();
		});

	},

	init: function () {
		this.elems = {
			$wrapper:       $('#js-b-popup__wrapper'),
			$showPopupBtn:  $('.js-b-show-popup-btn'),
			closeBtn:       '.js-b-popup__close-btn'
		};

		this.setMethods();
	}

};

$(function () {
    Templates.init();
    Popup.init();
});