JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<script src="https://rawgit.com/seahorsepip/jPopup/master/js/jquery.jpopup.min.js"></script>
<ul class="items">
	<li data-id="1">Item 1</li>
	<li data-id="2">Item 2</li>
	<li data-id="3">Item 3</li>
	<li data-id="Hello">Item Hello (4)</li>
	<li data-id="5">Item 5</li>
	<li data-id="6">Item 6</li>
	<li data-id="7">Item 7</li>
	<li data-id="8">Item 8</li>
	<li data-id="9">Item 9</li>
	<li data-id="10">Item 10</li>
	<li data-id="11">Item 11</li>
	<li data-id="12">Item 12</li>
</ul>

CSS

html {
	overflow-y: scroll;
}
pre {
	white-space: pre-line;
}
.items li {
	width: 33%;
	line-height: 200px;
	float: left;
	text-align: center;
}
.items li:hover {
	background: #eee;
	cursor: pointer;
}
/* Popup additional CSS */
.popup .popup_buttons .disabled {
	opacity: .3;
	pointer-events: none;
}
/* Popup */
.popup_overlay {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AEOFQs3Rovy/gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12N48eLFGQAI+QOFL6ImxwAAAABJRU5ErkJggg==");
	background: rgba(232,232,232,.8);
}
.popup_wrapper .popup {
	background: #fff;
	width: 600px;
	border-radius: 3px;
	border: 0;
	box-shadow: 0 5px 20px rgba(0,0,0,.1);
	outline: 1px solid #ddd;
	outline: 1px solid rgba(0,0,0,.03);
	font-family: "Roboto", sans-serif;
}
.popup_wrapper .popup .popup_title {
	color: #444;
	line-height: 64px;
	padding: 0 20px;
	margin-bottom: 10px;
	min-height: 20px;
}
.popup_wrapper .popup .popup_title h1,
.popup_wrapper .popup .popup_title h2,
.popup_wrapper .popup .popup_title h3,
.popup_wrapper .popup .popup_title h4,
.popup_wrapper .popup .popup_title h5,
.popup_wrapper .popup .popup_title h6 {
	margin: 0;
}
.popup_wrapper .popup .popup_title h1 {
	font-size: 22px;
}
.popup_wrapper .popup .popup_title h2 {
	font-size: 18px;
}
.popup_wrapper .popup .popup_title h3 {
	font-size: 16px;
}
.popup_wrapper .popup .popup_title h4 {
	font-size: 14px;
}
.popup_wrapper .popup .popup_title h5 {
	font-size: 12px;
}
.popup_wrapper .popup .popup_title h6 {
	font-size: 12px;
}
.popup_wrapper .popup_close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	cursor: pointer;
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	text-align: center;
	line-height: 23px;
	color: #444;
}
.popup_wrapper .popup_close svg {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	fill: #444;
	border-radius:...

JavaScript

$(".items li").click(function() {
	var item = $(this);
	var id = item.data("id");
	var popup = new jPopup({
		buttons: [{
			text: "Close"
		},{
			text: "Next",
			value: "next",
			class: "next",
			close: false
		},{
			text: "Prev",
			value: "prev",
			class: "prev",
			close: false
		}],
		closeButton: true
	});
	popup.open(function(r) {
		if(r == "next") {
			if(item.next().length) {
				item = item.next();
			}
		} else if(r == "prev") {
			if(item.prev().length) {
				item = item.prev();
			}
		}
		id = item.data("id");
		loadContent();
	});
	loadContent();
	function loadContent() {
		//Set page url
		history.pushState(null, null, "/Shots/"+id);
		//Set popup title
		popup.title("<h1>Item "+id+"</h1>");
		//Set popup button classes
		popup.popupButtons().children().removeClass("disabled");
		if(!item.prev().length) {
			popup.popupButtons().children(".prev").addClass("disabled");
		}
		if(!item.next().length) {
			popup.popupButtons().children(".next").addClass("disabled");
		}
		//content url, can be based on id variable
		var url = "https://raw.githubusercontent.com/seahorsepip/jPopup/master/README.md?id="+id;
		//Get content
		$.get(url, function(data) {
			//Load content into popup
			popup.content("<pre>"+data+"</pre>");
			//Re-center popup after loading content
			popup.position("center");
		});
	}
});