Loading iframe into jQuery popup only on click

I am using jQuery to create popups using iframe. There are a lot of frames on my pages that are very slow to load the whole page. I would like to delay the loading of the src iframes until a click is made. Here is the code I'm using:

<a class='COD_open' href='#cod'>COD</a>
<div id='COD' class='well'>
   <iframe name='I1' src='Freq/cod.html' width='500' height='500' ></iframe>
</div>
<script> 
   $(document).click(function () {$('#COD').popup({pagecontainer: '.container',transition: 'all 0.3s'});}); 
</script>

      

        
        
        
      

    

There is a similar Q&A suggesting using getElementById here , but I have not been able to implement this technique in my code. Any help would be greatly appreciated.