Как разместить всплывающее окно лайтбокса / div, чтобы оно находилось в центре окна просмотра в фрейме - PullRequest
Новая
       13

Как разместить всплывающее окно лайтбокса / div, чтобы оно находилось в центре окна просмотра в фрейме

1 голос
/ 08 февраля 2011

Как мне разместить всплывающее окно лайтбокса / div, чтобы оно находилось в центре окна просмотра в фрейме.

iframe встроен в HTML из другого домена.

1 Ответ

0 голосов
/ 08 февраля 2011

Все изменения ниже относятся к странице, загружаемой в iframe.

Сначала добавьте div в конец текста вашего документа. 

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

Затем, когда вы хотите использовать модальный режим, запустите следующий код (внутри функции): 

// 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');

Обратите внимание на две вещи

  1. Вы должны добавить модальный div к элементу body, чтобы облегчить жизнь
  2. Модал должен иметь абсолютную позицию - в примере я поместил его в строку

Дайте этому шанс:)

...