Member Avatar for wonderland

Hi,

My problem at the moment is a bit different than specified in topic title.

I have an Iframe which displays .html file with js/ content slider
when i click a link inside of that iframe I want for pop up window (greybox) to appear, but not inside of iframe , outside of it.

I found a section of developers page about this, but I don't seem to be able to do this..

I undersand that I must leave greybox folder/files where they normally are located?!

Do i need to add something more to

<a href="http://google.com/" onclick="return parent.GB_show('Google', this.href)">Visit Google</a>

as I just copied it. with no changes ..

Edited by wonderland because: n/a
  • 5 Contributors
  • 7 Replies
  • 311 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Short summary: the iframe can trigger a top-level popup in two reliable ways — direct invocation (only when iframe and parent are same-origin) or messaging (works across origins). ’s note about leaving the GreyBox files in the parent is the right instinct: the modal library and its CSS must be available in the top document for the overlay to cover the whole page.

Same-origin (simpler)

  • Make sure the parent page loads the modal library and exposes a small wrapper function the iframe can call.
  • Example pattern (wrapper name is arbitrary; this avoids assuming GreyBox internals):
/* parent page */
function openModalFromIframe(data) {
  // data: { url: "...", title: "..." }
  // call whichever modal API the parent uses here
  openTopLevelModal(data.url, data.title);
}

Cross-origin or safer approach: postMessage

  • Use postMessage from the iframe and a listener in the parent. Validate origin in production.
/* parent page */
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://your-iframe-origin.example') return;
  if (e.data && e.data.type === 'openModal') {
    openTopLevelModal(e.data.url, e.data.title);
  }
}, false);

/* iframe */
window.parent.postMessage({ type: 'openModal', url: '/page.html', title: 'Preview' }, 'https://parent.example');

Quick troubleshooting checklist

  • Confirm parent actually loads the modal JS/CSS and exposes a function the iframe can use.
  • Check the browser console for same-origin errors or “function not defined” messages.
  • If the iframe uses HTML5 sandbox, ensure it allows scripts/parent access or remove the restriction.
  • Verify origin validation when using postMessage; avoid '*' in production.
  • If the overlay looks clipped, ensure the overlay DOM is created in the parent/top document (not inside the iframe) and that z-index is higher than the iframe.

Credit: for the original scenario and / for steering toward parent-level solutions.

Recommended Answers

All 7 Replies

Member Avatar for vee_liang

are you trying to make some wrap page with opacity? why not try use jquery instead. easier to applied and a lot of other effects that you can use or implement.

Member Avatar for wonderland

I have a page example.html, when I press link in example.html, a pop up windows opens up (greybox, similair to lightbox, thickbox etc)

I know Iframes aren't great :/ but I have one, and that iframe displays example.html.

What I want to do is open pop up windows from Iframe, when example.html is displayed, so it opens in whole parent page, not just inside of that iframe..

I hope this makes more sense :)

Member Avatar for vee_liang

I have a page example.html, when I press link in example.html, a pop up windows opens up (greybox, similair to lightbox, thickbox etc)

I know Iframes aren't great :/ but I have one, and that iframe displays example.html.

What I want to do is open pop up windows from Iframe, when example.html is displayed, so it opens in whole parent page, not just inside of that iframe..

I hope this makes more sense :)

do you mean like facebook dialog box? the one who appear on its parent window? sorry could you please provide some screen shots of it?

Member Avatar for Alxandr

Wonderland: The code in your first post in this thead seems to be correct, is it not working?

Member Avatar for wonderland

I would like to say big thank you to all who replied :)

I solved the problem.

Member Avatar for happyrohit

Can you post the solution.

Member Avatar for Airshow

I solved the problem.

Then plese mark it "solved".

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.