JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog-box">
     <iframe id="Iframe"  src="javascript:void(0);" ></iframe>
    </div>
    <div class="loading">
      <br /><br />
      <div>Some content</div>
    </div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a id="occ" href="#">Click</A>
<br />
<br />
<br />
<br /><br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br /><br /><br />
<br /><br />
some content
<br />
<br />
<br />

CSS

.loading{
    width:200px;
    height:100px;
    background:#ccc;
    font-weight:bold;
    display:none;
    
}
.loading div{
    margin: auto 0px;
    text-align:center;
    vertical-align:middle;
}

JavaScript

$("#occ").click(function(event){
  event.preventDefault();
  var $loading = $(".loading");
  var windowH = $(window).height();
  var windowW = $(window).width();

  $loading.css({
    display:"block",
    position:"fixed",
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
  }).show();
});