Position modal dialog in center of viewable screen from within iFrame

I have a page done in adobe muse with a header and footer. In between I have I have an iframe that loads a php file. I am using javascript to calculate the height needed to display the contents of the iFrame without having to vertically scroll withing the iFrame itself. This can be a long list. The results it brings back have a "view image" button next to groups of information. These buttons are for a bootstrap modal that simply pops up the image for viewing. The issue is if you are near the bottom of the list, you have to scroll all the way to the top to see the image (which some people cant seem to figure out).

What I would like to have happen is the modal within the iFrame launches the dialog with the image in the parent window vertically/horizontally positioned. So it is basically outside of the iFrame.

Either that or have the modal dialog position itself vertically/horizontally on the same level as the button itself.

You can view an example at http://oddsideales.com/our-beers.html