JQuery插件SimpleModal保持重新打开动态加载的iframe

时间:2010-06-25 01:06:33

标签: jquery iframe simplemodal

我发现了一个类似的问题,但接受的答案不是我想要的: Using an iframe in jquery.simplemodal, the iframe reload when the popup is closed

我想首先动态地将内容加载到iframe中,然后在加载完成后,使用SimpleModal来显示它。我的问题是它似乎不断弹回。

我已经将以下内容链接到按钮单击并且打开正常(即使我不确定iframe内容在打开时实际上已完成加载。)但是在完美的关闭动画之后,我看到了ajax请求重复,然后弹回。

$.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();
            })
          })
        })
      },
    });
  });
});

因为你可以看到生活相当复杂;)iframe源必须在服务器上生成,然后加载iframe并在对话失去焦点时被破坏。

PS:如果stackoverflow可以为复制粘贴的代码执行自动缩进,这将是非常好的,这需要永远! ;)

我尝试在onClose函数中添加$('#zong').attr('src', '');,但仍然没有运气,模态对话从亡灵回来。 ;)

感谢您的帮助!

1 个答案:

答案 0 :(得分: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(); 
            }) 
          }) 
        }) 
      }, 
    }); 
});