I have an iframe that has a Modal in it,
Is there a way for me to display the Modal dialog over the iFrame width/height?
So let's say my iframe is 200x200 and my modal is 300x300, is it possible to display the modal 'outside' the iframe bounds without appending the modal to the parent page?
No, this is not possible - not without some form of messaging from your iframe hosted code to the parent page.
You cannot use iframe in this case. If you want to get control of other page in iframe, use some div. You can use $.load() to get the content of other page. Then you can control watever way you want.
Related
I have a popup div in which I have an iframe. Initially, I have set the height of iframe to some px according to the content in it.
Now, I have a click event on the iframe from which I am redirecting to another view but this view has more content to fit the height. So I want to change the height of the iframe on that event or on the load of other view but I am unable to access the iframe from within that click event of a button.
EasyXDM provides a bunch of useful functions in order to manipulate communication between the client and fetched iframes
Here is an example similar with what you want to achieve.
Keep in mind that you should also control the content into the iframe as well.
I'm wondering if it is possible to open a lightbox popup and redirect the parent page at the same time.
I have an ajax script that gets html as a response, i want to open a lightbox popup to show the html but at the same time the parent windows should redirect to a specific page.
This can be done but not in the normal document.reload() way. Rather than that, you would have to ajax the parent page content, then manually append it to a container in the parent page while the light box is visible! this will not interrupt the light box, but change the content of the parent page! Will be a tricky thing to do but, achievable.
I am trying to add dynamic image gallery to a site I am working on but I am limited to only HTML and css. So I made a separate page on my own server with required php file to create the gallery and used Iframe to load the gallery page to the site.
Problem is now there is two separate scroll bars. one to scroll the content in the iframe and one for the parent page. This makes scrolling on the page very messy. Is there any way so that I can get rid of the scroll bar for the Iframe and be able to scroll through the content within the Iframe from the parent page. Anyway I can make the Iframe behave like a div? I thought the best way would be to set the height of iframe so the height of iframe would change to fit whatever the content that's in it. This way I thought there wouldn't be need for a scroll bar on the iframe.
Here is the gallery page I am trying to load with Iframe http://lejund.com/plugin/#*
I am open to all your suggestions. Is there better way to achieve this other than the Iframe?
Thank you
I found this solution on github by davidjbradshaw.
https://github.com/davidjbradshaw/iframe-resizer
It's using window.postmessage to achieve this.
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.
My page structure is like
I have a html page which consist of a jQuery Dialog.
Within the jQuery Dialog a screen opens within iFrame.
Now the problem I am facing is - I want to close jQuery Dialog by clicking a button within iFrame. (For e.g. If my iFrame source is Google.com, then on click of search button my dialog box should close)
So, Can I write close call handling click event of search button in $(document).ready(function() of my html page?
Note :- iframe source is not accessible.
If no, then what are the other possible option to do it?
Thanks in Advance.
If the iFrame source is on a different domain than you cannot do this.
Options
Use the Dialog's built in close functionality
If the position of your item that you want to trigger the close is fixed, you can overlay a div covering. Fire the close event on the clicking of the div. http://jsfiddle.net/YvbPB/
See jQuery/JavaScript: accessing contents of an iframe my friend.