How do i position a lightbox/div popup so that it comes in the center of the viewport in an iframe

How do i position a lightbox/div popup so that it comes in the center of the viewport in an iframe.

The iframe is embed开发者_运维技巧ded into a HTML from a different domain.

All changes below are referring to the page being loaded in the iframe.

First, add the div to the bottom of the body of your document.

var body = $('body')[0];
$(body).append("<div id='modal' style='position:absolute;display:none;'></div>");

Then when you want to use the modal, run the following code (within a function):

// to position it, do the following
var body = $('body')[0];

// get the position and size info on the iframe
var height = $(body).height();
var width = $(body).width();

// get the size information on the modal div
var divHeight = $('#modal').height();
var divWidth = $('#modal').width();

// put it together to get the proper position
var top = (height/2)-(divHeight/2);
var left = (width/2)-(divWidth/2);

// set it and we're done, hiya!
$('#modal').css('top', top);
$('#modal').css('left', left);

// show the div
$('#modal').css('display', 'block');

Note two things

1. You should add the modal div to the body element to make life easier
2. The modal should have a position of absolute - in the example I put it inline

Give that a shot :)