JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="message"></div>
<div id="invisible_layer">

</div>
<iframe id="iframe" src="//example.com"></iframe>

CSS

iframe {
    width: 500px;
    height: 300px;
}
#invisible_layer{
  position: absolute;
  background-color:trasparent;
  width: 500px;
  height:300px;
}

JavaScript

$("#invisible_layer").on("click",function(){
alert("click");
$("#invisible_layer").css("z-index",-11);

});
$("iframe").on("mouseleave",function(){
$("#invisible_layer").css("z-index",11);
});