JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div class="">
  <div id="dialog" class="dialog">
  <button id="btn2">hide dialog
  </button>
  </div>
  <div><button id="btn">show full screen dialog
  </button>
  Lorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facerpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit augue nobis clita, id alia eruditi copiosae vis. Nam et prima aliquid.Lorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facer aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit duo. Nam oratio vivendo in. Et sit augue nobis clita, id alia eruditi copiosae vis. Nam et prima aliquid.Lorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facer aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit duo. Nam oratio vivendo in. Et sit augue nobis clita, id alia eruditi copiosae vis. Nam et prima aliquid.Lorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facer aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit duo. Nam oratio vivendo in. Et sit augue nobis clita, id alia eruditi copiosae vis. Nam et prima aliquid.Lorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facer aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit augueLorem ipsum dolor sit amet, cu aeque molestie vis. Pro no facer aeque saepe, ut assum possim eloquentiam duo. Nam oratio vivendo in. Et sit augue

Probatus facilisi assentior vix ea, per doctus repudiare scripserit at. Est id option invidunt rationibus, ut est errem sensibus, mel blandit adversarium no. Mea tritani insolens laboramus id, volumus alienum...

CSS

.dialog{
  display:none;
  
}
.showdialog{
  display:block;
  position:fixed;
  width: 100%;
	height: 100%;
  z-index:200;
  background: green;
}

body,html{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

JavaScript

$(function(){
  $('#btn').click(function(){
    $("#dialog").addClass('showdialog');
    $("body").css("overflow","hidden");
  });
  $('#btn2').click(function(){
  	$("#dialog").removeClass('showdialog');
    $("#dialog").addClass('dialog');
    $("body").css("overflow","auto");
  });
});