JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body-container">
  <div class="button">
    <button class="try-it">Try It!!</button>
  </div>
  <div class="modal-container hide">
    <div class="modal-body">
      <span class="close-btn">x</span>
      <p>Here is the content of the modal</p>
      <!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->
      <!--Or you can use Bootstrap modal instead of this one.-->
    </div>
  </div>
</div>

CSS

.modal-container{
  position: absolute;
  background-color: rgba(35, 35, 35, 0.41);
  top: 0;
  bottom: 0;
  height: 300px;
  width: 100%;
}
.modal-body{
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: white;
}
.close-btn{
  float: right;
}
.hide{
  display: none;
}
.body-container{
  position: relative;
  box-sizing: border-box;
}
.close-btn{
  cursor: pointer;
}

JavaScript

$("button.try-it").on("click", function(){
	$(".modal-container").removeClass("hide");
});
$(".close-btn").on("click", function(){
	$(".modal-container").addClass("hide");
});