CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
jkw4703
jkw4703

Reputation: 362

Iframe causing problems with css popup

I'm fairly new to web development and am self taught on everything I do. I have an iframe in which I have a page that has a css & javascript popup called by jquery. What should happen is when a link is pressed, before going to the next page, it shows up in a popup window with a shaded out background. This is my javascript code:

$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;
 });`

and this is the css involved

#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;

}

My question is how can I get the pop up to show up and be centered to the screen where the user's location on the page not just centered in the iframe. I'm sorry if this is poorly explained. This is my very first post ever. Mostly I come here and find my answer and have never needed to post anything. Please help if you can. Thanks!

EDIT #1: Here is the jsfiddle

Upvotes: 0

Views: 506

Answers (1)

tedski
tedski

Reputation: 2311

Unfortunately you can't access any content from the parent page in the iFrame, like screen size, in order to set values via JavaScript. And the css in the child page would only be relevant to the interpreted "screen size" of the window that contains the iFrame.

If you did have a fixed layout, you could maybe pass the screen size as querystring parameters to your iFrame page.

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

Then you could do some math when the child page loads in order to set the position of your modal dialog so it appears centered, but it would still have to be contained in your iFrame.

Upvotes: 1

Related Questions