JSFiddle - React, Tailwind, and code Playground

by Daniele Cedro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- da non includere -->



<div id="over" class="chiudi">
  <span class="chiudi"> &times;</span>
  <div id="light-box" class="text-center"><h5>messaggio</h5></div>
</div>
<button id="prova">PROVA</button>

CSS

body,html {
  background:pink !important;
  }
/* da non includere*/



#over {
	min-height: 100%;
	min-width: 100%;
	overflow: hidden;
	position: fixed;
	background:rgba(255,255,255,0.7);
	z-index: 4;
  cursor: pointer;
  /*display: none;*/
}
#over span {
  position:absolute;
  right:30px;
  top:30px;
  font-size:50px;
  color:black;
  }

#light-box {
	max-width: 50%;
	margin: 0 auto;
	margin-top: 47%;
	color: black;
	text-transform: uppercase;
	padding: 15px 20px;
}

JavaScript

/*$( "#prova" ).click(function() {
	$("#over").fadeIn("fast");
});*/
$( ".chiudi" ).click(function() {
	$("#over").fadeOut("fast");
});