Load an iframe scr only on modal open

Question

My client wants to track if a modal is opened by a visitor, the only way that came to me was loading an iframe into the modal, and then they have a url to track. But the url is loaded whether the modal is opened or not.

I found this which seems to be what I want, they are using Bootstrap whilst I'm using Foundation6, I've tried to convert it to work for Foundation but am clearly missing something.

Obviously there may be a better way to achieve what I need without the below?

The modals:

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-book'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-quote'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-brochure'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

The script:

var iframes = ["URL1","URL2","URL3"];

$('.reveal-modal').on('open.zf.reveal', function() {
    var loaded = $(this).data('loaded');

    if(loaded == false) {
        var id = $(this).data('id');
        $(this).find('iframe').attr('src',iframes[id]);

        $(this).data('loaded', 'true');
    }
});

I'm wondering if there is a reason for not using something like google analytics? — drakyoko, Sep 11 '16 at 10:51

score 0 · Answer 1 · answered Sep 01 '16 at 16:22

0

You don't need an iframe, unless the iframe contains it's own content or JavaScript. Just send an AJAX request to the server with the URL (and if necessary query parameters).

You must have an .on('open.zf.reveal',...) event though. There's no way around that since you want to know when the modal is open.

$('.reveal-modal').on('open.zf.reveal', function (evt) {
    $.ajax({
        url: url
        method: 'GET'
    });
})

Basically, whatever needs to happen in the modal when it's open needs to be done in the event function. So you shouldn't have pre-defined content in the modal.

Hope that helps.

answered Sep 01 '16 at 16:22

Knight Yoshi

924
3
11
32

In these instances the modals/iframes contain content (forms). – CuCo Sep 01 '16 at 16:36
Yeah, then you still do basically what you're doing above. However, don't pre-load the content of the modal. You may also want to remove the iframe when the modal is closed if it still does things when the modal is closed. Use the 'closed.zf.reveal' event. – Knight Yoshi Sep 02 '16 at 01:25

CuCo · Answer 2 · 2016-09-01T17:30:39.827

Right, I think I've got it...

The Modals:

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-book'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-quote'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-brochure'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

The Script:

var appendIFrameDemo = true;
var appendIFrameQuote = true;
var appendIFrameBrochure = true;
$(".bookDemo").click(function() {
    if(appendIFrameDemo) {
        $('.iframe-container-book').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-book" scrolling="no" style="border:0"></iframe> ');
        appendIFrameDemo = false;
    }
});
$(".getQuote").click(function() {
    if(appendIFrameQuote) {
        $('.iframe-container-quote').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-quote" scrolling="no" style="border:0"></iframe> ');
        appendIFrameQuote = false;
    }
});
$(".getBrochure").click(function() {
    if(appendIFrameBrochure) {
        $('.iframe-container-brochure').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-brochure" scrolling="no" style="border:0"></iframe> ');
        appendIFrameBrochure = false;
    }
});

.bookDemo, .getQuote & .getBrochure are the classes on the three buttons to open the modals.

although I've done this for a forth modal which also works except on the homepage, which used a slightly different template. Here it loads the three times within the Div for some unknown reason. — CuCo, Sep 01 '16 at 17:36

score 0 · Answer 3 · answered Sep 02 '16 at 09:04

This version fixed the problem of it loading the iframe three times on the homepage:

<div id="getnewsletterModal" class="newsletterReveal reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-newsletter'>
    <iframe id="iframeNewsletter" src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>

var appendIFrameNewsletter = true;
    $(".getnewsletterModal").click(function() {
        if(appendIFrameNewsletter) {
            $('#iframeNewsletter').attr('src', '[url here]');
            appendIFrameNewsletter = false;
        }
    });

Load an iframe scr only on modal open

3 Answers3