Struggling to make this work for a while now. It seems like a small issue related to CSS.
The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom.
Here is the code snippet:
.overlay{
width: 100%;
height:100%;
position:relative;
}
.overlay1{
z-index: 1;
position:absolute;
left: 55%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 40px;
height: 20px;
background-color: rgba(0,0,0,0.5);
}
.frame {
width: 100%;
height: 100%;
} <div class="overlay">
<iframe class="frame" allowtransparency="true" src="http://blah.com"></iframe>
<div class="overlay1">
<img src="http://www.ore-processing.com/d/images/livechat.png" class="my_popup_open"></img>
</div>
</div>I'm attempting to place a button on top of an IFrame and then show a popup (using JQuery) for chat functionality.
Your help is greatly appreciated!