WordPress.org

Ready to get started?Download WordPress

Forums

Easy Modal
[resolved] Open an iframe inside a Modal Box (9 posts)

  1. pralisson.magalhaes
    Member
    Posted 10 months ago #

    Hi,

    I'm building a site and I need to open an iframe code in a Modal window. Is this possible with your plugin? If it is, how is it work?

    Tks,

    Alisson

    http://wordpress.org/plugins/easy-modal/

  2. danieliser
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  3. pralisson.magalhaes
    Member
    Posted 10 months ago #

    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

  4. danieliser
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  5. pralisson.magalhaes
    Member
    Posted 10 months ago #

    Tks a lot for your precious help.

    I'll try the both ways...

    Hugs...

  6. ben1000
    Member
    Posted 3 months ago #

    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');
        });
    })
  7. danieliser
    Member
    Plugin Author

    Posted 3 months ago #

    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="http://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.

  8. ben1000
    Member
    Posted 3 months ago #

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

  9. andrezasv
    Member
    Posted 2 months ago #

    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?

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.