JSFiddle - React, Tailwind, and code Playground

by Webbly25

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/datatables.min.js"></script>
<body>
  Some base content
</body>

CSS

.greyCover {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(238, 238, 238, 0.7);
  top: 0;
}

.floatHolder {
  position: fixed;
  border-radius: 10px;
}

JavaScript

var floatHolderCount = 0;

$(document).on("click", ".greyCover", function() {
  $(this).parent().fadeOut(400, function() {
    $(this).remove();
  });
});

function hideFloatHolder(className) {
  $("." + className + "").fadeOut(400, function() {
    $("." + className + "").remove();
  });
}

function showFloatHolder(head, body, print = false) {
  floatHolderCount++;
  var zIndex = 100 + floatHolderCount;

  var data = `
	<div class="floatSet` + floatHolderCount + `" hidden>
		<div class="greyCover" style="z-index: ` + zIndex + `"></div>
		<div class="container floatHolder" style="z-index: ` + zIndex + `">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-heading">
						` + head + `
						<button type="button" class="btn btn-default pull-right" onclick="hideFloatHolder('floatSet` + floatHolderCount + `')" id="btn-floatHolder-quit">
							<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
						</button>`

  if (print != false) {
    data = data + `
						<button type="button" class="btn btn-default pull-right" onclick="printFloat('` + print + `')">
							<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
						</button>`
  }
  data = data + `
					</h3>
				</div>
				<div class="floatHolderBody" class="panel-body" style="overflow-y: auto; overflow-x: hidden;">
					` + body + `
				</div>
			</div>
		</div>
	</div>`;

  $("body").append(data);
  $(".floatSet" + floatHolderCount).fadeIn();

  $(".floatHolderBody").css("max-height", $(window).height() * 0.7);
  $(".floatHolder").css("left", ($(window).width() - $(".floatHolder").width()) / 2);
  $(".floatHolder").css("top", ($("nav").height() * 1.1));

  $(".greyCover").height($(document).height());

  $(window).resize(function() {
    $(".floatHolderBody").css("max-height", $(window).height() * 0.7);
    $(".floatHolder").css("left", ($(window).width() - $(".floatHolder").width()) / 2);
    $(".floatHolder").css("top", ($("nav").height()...