I'm trying to programmatically close a Facebox modal with JavaScript code that's called
within the iframe. That doesn't seem to work well with the JavaScript DOM.
https://github.com/defunkt/facebox
More generally, how would I close a generic modal that embeds an iframe with the code to close it inside the iframe. (sorry for the tounge(or eye) twisting)
Here's my example:
I have a facebox with something like this:
jQuery.facebox("stuff goes here <iframe src="example.php"...." more stuff"); //opens the modal(works great)
Then INSIDE the iframe, I want to call jQuery(document).trigger('close.facebox');. It only seems to work if I call it on the parent page or on the modal page, but not in the actual iframe. Is there a way I can make it close by calling it within an iframe example.php?
Edit: I was asking how I can access the parent frame from inside an iframe with jQuery to oversimplify the question.
You can't modify an element that "belongs" to the parent page from within that popup page. As far as I know you will have to issue your hide code from the parent. You could always have your code inside the dialog do something like this:
parent.$("#dialog").hide();
I think that's what you're asking...
Here's what worked for me:
My page has an IFRAME inside a DIV, the DIV is what facebox is supposed to fadeIn and fadeOut. The SRC of the IFRAME is a page that has a link on it that looks like this:
close this facebox modal
In the HEAD of the page that contains the DIV and IFRAME (NOT the page called into the IFRAME), I have the JavaScript function "close_QM_facebox()" that looks like this:
function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }
That's all. Not tested cross-browser or in production yet. I spent hours Googling this problem and trying everything from changing single quotes to double quotes, document-dot-this and parent-dot-that, window.frames['whatever'], and this one-line function does it. If you're trying to trigger the function from the page that is called into the IFRAME, you have to be sure to use parent.close_QM_facebox(). Hope this helps.
BTW, see lines 47 and 49 of facebox.js ver 1.2 - this solution was right there in the commented-out "Usage" section of the .js file itself. I copied & pasted line 49 into my function, didn't change a thing except un-commenting it :)
The embedded iframe is pointing to a URL on a different domain correct? In this case no, you cannot for security reasons make any calls to the parent document from within the iframe.
I think, you can use FancyBox. There is public methods allowed to close the modal dialog within an iframe, also an option to make the fancy box act like modal window:
- Within an iframe use - parent.$.fancybox.close();
No problem if you use scripting on the same domain, if you want to use cross domain just provide each page (.php/html etc) that call each other an exchange paramater/query safely using POST/GET. But to close the fancybox modal you have to run this methods with the same domain page.
Hope it works for you Stan.
Related
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:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
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:
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?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
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?
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.
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
First of all I'd like to thanks in advance for your answers on this.
Currently I'm working on a site where I have a page that contains an <iframe>.
The page within the <iframe> has the Tinybox call to open the modal popup (that I want to overlay over the parent page), but the overlay stays within the <iframe>.
Is there a way to load the overlay over the parent page? If so, how do I do it?
Use this functinality in your code
window.top
For the moment, I'll just keep the script in a separate file and include that on every page.
I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.
I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.
I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.