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](https://stackoverflow.com/questions/24892706/bootstrap-want-hide-contents-until-modal-loads) 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');
    }
});

```