Question

I’ve found a similar question, but the accepted answer is not what I want:
Using an iframe in jquery.simplemodal, the iframe reload when the popup is closed

I want to first load content into an iframe dynamically, then when it has finished loading, use SimpleModal to display it. My problem is that it seems to keep popping back up.

I’ve linked the following to a button click and it opens up fine (even though I’m not convinced that the iframe content actually finished loading when it’s opening.) but after the nice close animation, I see that the ajax request is repeated and it pops back open.

$.get('a/zong/299/' + number +"/", function(data) {
  $(document.body).append('<iframe id="zong" src='+data+
    ' width="490" height="350" style="display:none;border:none;"></iframe>');
  $('iframe#zong').load(function() 
  {
    $('#zong').modal({
      overlayCss: {backgroundColor:"#C4EFFF"},
      containerCss:{
        ...
      },
      overlayClose:true,
      onOpen: function(dialog){
        dialog.overlay.fadeIn('slow', function(){
          dialog.data.hide();
          dialog.container.fadeIn('slow', function(){
            dialog.data.slideDown('slow');
          });
        })
      },
      onClose: function(dialog){
        dialog.data.fadeOut('slow', function(){
          dialog.container.hide('slow', function(){
            dialog.overlay.slideUp('slow', function(){
              $.modal.close();
            })
          })
        })
      },
    });
  });
});

as you can see life is fairly complicated 😉 the iframe source has to be generated on the server, then an iframe with it loaded and that destructed when the dialogue loses focus.

PS: It would be nice if stackoverflow could do auto-indentation for copy-pasted code, that took forever! 😉

I have tried adding $('#zong').attr('src', ''); inside the onClose function, but still no luck, the modal dialogue comes back from the undead. 😉

Thanks for the help!

Answer 1

$.get('a/zong/299/' + number +"/", function(data) { 
    $('<iframe id="zong" src='+data+ 
    ' width="490" height="350" style="display:none;border:none;"></iframe>').modal({ 
      overlayCss: {backgroundColor:"#C4EFFF"}, 
      containerCss:{ 
        ... 
      }, 
      overlayClose:true, 
      onOpen: function(dialog){ 
        dialog.overlay.fadeIn('slow', function(){ 
          dialog.data.hide(); 
          dialog.container.fadeIn('slow', function(){ 
            dialog.data.slideDown('slow'); 
          }); 
        }) 
      }, 
      onClose: function(dialog){ 
        dialog.data.fadeOut('slow', function(){ 
          dialog.container.hide('slow', function(){ 
            dialog.overlay.slideUp('slow', function(){ 
              $.modal.close(); 
            }) 
          }) 
        }) 
      }, 
    }); 
});