动态调用的fancybox

我要动态调用的fancybox加载的iframe。 iframe的URL将由表单中的一些元素组成。我一直在使用这样的事情，它的工作原理：动态调用的fancybox

<!--***************************************************************--> 
<!--this allows fancybox to be called using a dynamic link--> 
<div id="hidden_clicker" style="display:none"> 
    <a class="various fancybox.iframe" id="hiddenclicker" href="http://whatever.com" >Hidden Clicker</a> 
</div> 
<!--***************************************************************-->

那么脚本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".various").fancybox({ 
      maxWidth : 800, 
      maxHeight : 600, 
      fitToView : false, 
      width  : '70%', 
      height  : '70%', 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'elastic', 
      closeEffect : 'none' 
     }); 
    }); 

    function callBoxFancy(my_href) { 

     var j1 = document.getElementById("hiddenclicker"); 

     j1.href = my_href; 

     $('#hiddenclicker').trigger('click'); 

    }

然后加载的iframe：

$('#addtownsubmit').click(function() { 
     var $url='/areastructure/addtown/'; 
     var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/' 
     callBoxFancy($url+$get+'iframe/1'); 
    return false; 

});

是否有改善这种代码的方式这样我就不必包含html代码。 jquery肯定能为我创建这个隐藏的div吗？

来源

2012-02-12 dimbo

你只需要动态创建的元素，并将它们添加到文档体。 E.g：

var $div = $("<div id='hidden_clicker'/>").hide(); 
var $a = $("<a class='various fancybox.iframe' id='hiddenclicker' href='http://whatever.com'>Hidden Clicker</a>"); 

$div.append($a); 
$("body").append($div);

来源

2012-02-12 23:40:33 karim79

感谢。那完美的工作。接受答案。我已经扩展了您的想法，并在下面发布的其他答案中发布了其他人的代码。 – dimbo 2012-02-13 11:53:18

我伸出的想法，卡里姆送给我的，并且做了以下内容：

<script type="text/javascript"> 

    jQuery(document).ready(function(){jQuery("#FormContactDetails").validationEngine()}); 

     function callBoxFancy(my_href,type) { // type could be 'iframe', 'ajax' etc. 
      var $div = $("<div id='hidden_clicker'/>").hide(); 
      var $a = $("<a class='ondemand fancybox."+type+"' id='hiddenclicker' href='"+my_href+"' >Hidden Clicker</a>"); 

      $(".ondemand").fancybox({ 
       maxWidth : 800, 
       maxHeight : 600, 
       fitToView : true, 
       width  : '70%', 
       height  : '70%', 
       autoSize : true, 
       closeClick : false, 
       openEffect : 'elastic', 
       closeEffect : 'none' 
      }); 

      $div.append($a); 
      $("body").append($div); 
      $('#hiddenclicker').trigger('click'); 
      $("#hiddenclicker").remove(); 

     } 


     $('#addtownsubmit').click(function() { 
      var $url='/areastructure/addtown/'; 
      var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/' 
      callBoxFancy($url+$get+'iframe/1','iframe'); 
      return false; 

     }); 

</script>

来源

2012-02-13 11:51:41 dimbo

动态调用的fancybox

回答

相关问题