CODEWITHSUNDEEP
javascriptjqueryiframemodal-dialog
Aniket
Aniket

Reputation: 9758

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.

Now, I will explain the process we are following:

  1. Our embed script will be loaded in the user's website.
  2. It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
  3. The iframe uses two scripts — jQuery and our modal library.
  4. On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.

From my analysis of the situation, I have come up with the following questions:

  1. I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?

  2. To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?

  3. If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?

Upvotes: 0

Views: 189

Answers (2)

Given
Given

Reputation: 166

To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.

So on the parent page you would have a script such as

function showModal(display) {
   var colorbox = $('#colorbox');
   var overlay = $('#cboxOverlay');

   if (display) {
     colorbox.fadeIn("medium"); 
   } else {
     colorbox.fadeOut("medium");
     overlay.fadeOut("medium");
   }
}

I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.

Then from your iframe you could use this script to call your modal

javascript: window.parent.showModal(true);

Hope this helps.

Upvotes: 1

Jabran Saeed
Jabran Saeed

Reputation: 6168

1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.

2) Use JSON-P

Upvotes: 1

Related Questions