Open an iframe inside a Modal Box

Thanks for checking us out. You can infact use iframes in the modals with no problems.

The biggest things to look out for are sizing as usually the iframe either has a specific size so you will want to choose “Custom” for the modal size and set the same as the iframe.

Hey,

Thanks to answer me so soon and sorry to interrupt you again. I’m not so advanced user (I’m kind a medium range user… rs) and if you can helps me, I have some doubts:

1 – Can I set the modal box to show after click on a especific url?

2 – Can I use any tipe of iframe code on easy modal plugin?

I need that the modal window opens from a list of urls on an especific page (one window per url).

Tks,

Alisson

Depending on your situation you have a few options.

#1 Is really simple but if your gonna have more than a dozen or so links on the page or multiple pages of dynamic links it not an ideal solution.

Simply create a modal for each iframe link and put the iframe code in the modal. Then mark each link with the correct modal class.

#2 is a little less simple to setup and will require a small snippet of jquery added to your js files.
Basically you make one modal with an iframe in it with an empty src attribute.

Then make your links point to the URL you want them to open in the iframe and add the class for your single iframe modal to all links you want to open like this.

So all links will have class of say eModal-1

In your js something like this assuming your jquery version is v1.9 or above.

jQuery(document).ready(function(){
    jQuery(document).on('click', 'eModal-1', function(e){
        e.preventDefault();
        jQuery('#eModal-1 iframe').attr('src', jQuery(this).attr('href'));
        jQuery('#eModal-1').emodal('open');
    });
})

This basically says all links with class eModal-1 when clicked the modals iframe will change to the target of the link and then open the modal.

Tks a lot for your precious help.

I’ll try the both ways…

Hugs…

This is really useful but which js file would you add this code to?

I have a url which varies by one numbre which I need to show in the iframe within the modal, so I would do this, right?

jQuery(document).ready(function(){
    jQuery(document).on('click', 'eModal-1', function(e){
        e.preventDefault();
        jQuery('#eModal-1 iframe').attr('src', jQuery(this).attr('fixedurl/'));
        jQuery('#eModal-1').emodal('open');
    });
})

If your theme doesnt have a js file you can add to you will need to create one. Google wordrpess add js file to theme. Should be helpful.

Assuming your links look like this

<a href="https://example.com/page?id=1" class="eModal-1">Click</a>

Your js could be as simple as.

jQuery('.eModal-1').click(function(e){
    e.preventDefault();
    jQuery('#eModal-1 iframe').attr('src', jQuery(this).attr('href'));
    jQuery('#eModal-1').emodal('open');
});

You can now see what the JS does, When you click the link it first stops the default click functionality, then sets the src tag of the iframe in your modal equal to the href parameter of your link. Then it triggers the modal to open.

Thanks for the reply
What should the iframe code be within the modal?
<iframe src=""></iframe>
Or something else?

I have the same issue.

The problem is that when the modal is opened by the second time, it previosly shows the iframe and after it loads the iframe.

How to avoid the modal to show the last content before reload the iframe?