How do I vertically center the modal in an iframe?

Question

I have a web application that: 1. Is an iframe (it appears in multiple places, e.g facebook). 2. Has modals in it (I'm using jqmodal). 3. Has a vertical scrollbar.

The problem is that when a modal is opened from a link at the bottom of my page, the modal appears at the top of my page, so the user has to scroll upwards in order to see the modal.

Is there any way to center the modal vertically? Or maybe scroll up in the outer frame?

Thank you in advance.

Answer 1

you can scroll to it like this:

var offset = $('#mymodal').offset().top;
$('html, body').animate({ scrollTop: offset - 100 }, 500);

or align it vertically like this:

position: absolute;
top: 50%;
margin-top: -100px;
height: 200px;