Iframe вызывает проблемы с всплывающим окном css

Question

Я довольно новичок в веб-разработке и сам изучаю все, что я делаю. У меня есть iframe, в котором у меня есть страница с флагом css & javascript, вызываемым jquery. Что произойдет, когда нажата ссылка, прежде чем перейти на следующую страницу, она появится во всплывающем окне с затененным фоном. Это мой Javascript код:

$SearchListings.on("click", "a", function (e) { 
    e.preventDefault(); 
    href = e.target.href; 
    itemnum = getItemNum(href); 
    var dataString = //urlhere 
    $.get(dataString, function (data) { 
     $linkShade.fadeIn(); 
     $linkModal.html(data).delay(500).fadeIn(); 
     Galleria.loadTheme('js/galleria.classic.min.js'); 
     $('#galleria').galleria({ lightbox: true }); 
    }); 
}); 

$linkShade.on("click", closeModal); 
$linkModal.on("click", ".modalCancel", closeModal); 

$linkModal.on("click", ".modalBtn", function (e) { 
    e.target.href = href; 
});` 

и это CSS участие

#linkModal { 
background: white; 
border: 10px solid black; 
bottom: 0; 
color: black; 
display: none; 
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; 
height: 700px; 
left: 0; 
margin: auto; 
position: fixed; 
right: 0; 
top: 0; 
width: 800px; 
overflow: scroll; 

} 

Мой вопрос, как я могу получить всплывающее окно, чтобы показать и центрируется на экране, где местоположение пользователя на страница не только сосредоточена в iframe. Простите, если это плохо объяснено. Это мой первый пост. В основном я прихожу сюда и нахожу свой ответ, и мне никогда не приходилось ничего писать. Пожалуйста, помоги, если можешь. Благодаря!

EDIT # 1: Вот jsfiddle

Answer 1

К сожалению, вы не можешь получить доступ к любому контенту из родительской страницы в плавающем фрейме, как размер экрана, для того, чтобы установить значение с помощью JavaScript. И css на дочерней странице будет иметь отношение только к интерпретируемому «размеру экрана» окна, содержащего iFrame.

Если у вас есть фиксированный макет, возможно, вы можете передать размер экрана в качестве параметров запроса на страницу iFrame.

var $iframe = $("#myIframe"); 
$iframe.attr("src", "iFrame.html?parentHeight=" + $(window).height() 
            + "&parentWidth=" + $(window).width() 
            + "&iFrameHeight=" + $iframe.height() 
            + "&iFrameWidth=" + $iframe.width(); 

Тогда вы могли бы сделать некоторую математику при загрузке страницы ребенка для того, чтобы установить позицию вашего модального диалога, чтобы он отображался по центру, но он все равно должен содержаться в вашем плавающем фрейме.