代码之家  ›  专栏  ›  技术社区  ›  rdrey

JQuery插件SimpleModal不断重新打开动态加载的iframe

  •  2
  • rdrey  · 技术社区  · 16 年前

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

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

    $.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可以为复制粘贴的代码自动缩进,那就太好了,那要花很长时间!;)

    $('#zong').attr('src', ''); 在onClose函数中,但是仍然没有运气,模态对话从不死生物那里回来

    谢谢你的帮助!

    1 回复  |  直到 9 年前
        1
  •  1
  •   Kai    16 年前
    $.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(); 
                }) 
              }) 
            }) 
          }, 
        }); 
    });