Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent div wait for the iframe to load before styling it as an overlay. When the iframe is closed, the parent div should return to its original position.
I would greatly appreciate any assistance or code snippets that could help with this issue. If zoid has a built-in function to overlay the web content with the iframe, that would be even better. Here is an example of how my divs are structured:
<script src='zoid_sett.js'></script>
<div id='zoid_iframe'>
<!--the iframe appears here -->
</div>
<div id="zoid_btn">
<script>
mybutton({}).render('#zoid_btn')
<script>
</div>
The dimensions of the iframe are set to 500 by 300 in the zoid settings.js file that I am including. The problem lies not in rendering the iframe with zoid but in styling either the iframe itself or its parent div to act as an overlay.