从iframe将div弹出窗口居中显示在屏幕上

Question

Have a iframe in my page, I need show a small div popup using javascript codes in iframe. The domain of iframe and parent is NOT same. how to center this div popup in whole screen. I found another similar question, but no answer in it.

Answer 1

You can't edit that iframe, but you can make the div with a bigger z-index than of that iframe and that be aligned inside of the iframe.

Steps:

1. Create a div, with an class test (in my steps).
2. Change its left position to the iframe offsetLeft plus offsetWidth/2 (of iframe), and subtract with the offsetWidth/2 of the div, you do the same to the top (replacing offsetWidth per offsetHeight and offsetLeft to offsetTop ).

It may be so:

div.style.left=(iframe.offsetLeft+(iframe.offsetWidth/2))-div.offsetWidth/2+'px',
div.style.top=(iframe.offsetTop+(iframe.offsetHeight/2))-div.offsetHeight/2+'px'

I recommend to update the top and left CSS properties of the div everytime that the user scroll the page also, else the div will not combine with screen.