JSFiddle - React, Tailwind, and code Playground
HTML
<p>Click the links in the iframe to see the overlay div</p>
<iframe id="myFrame" src="http://fiddle.jshell.net/AdJaa/show/"></iframe>
<div id="overlayDiv">
<ul>
<li>Context</li>
<li>menu</li>
<li>goes</li>
<li>here</li>
</ul>
</div>
CSS
iframe {
margin: 100px;
}
#overlayDiv {
position: fixed;
width: 50px;
height 75px;
border: thin solid grey;
background-color: yellow;
visibility: hidden;
}
JavaScript
$('#overlayDiv').click(function() {
$(this).css('visibility', 'hidden');
});
$('#myFrame').contents().find('a').click(function() {
var overDiv = $('#overlayDiv');
overDiv
.offset({
left: $('#myFrame').offset().left - overDiv.width(),
top: $('#myFrame').offset().top + $(this).offset().top
})
.css('visibility', 'visible');
});