動態調用的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

回答

相關問題