동적으로 팬시 박스 호출

Question

동적으로 fancybox를 호출하여 iframe을로드하려고합니다. iframe의 URL은 양식의 일부 요소로 구성됩니다. 나는 이런 식으로 뭔가를 사용하고 그것은 작동합니다

<!--***************************************************************--> 
<!--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> 
<!--***************************************************************--> 

다음 스크립트를

$('#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; 

}); 

이 코드를 향상시킬 수있는 방법이 있나요 :

다음

<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을로드 할 그래서 나는 html 코드를 포함 할 필요가 없다. 확실히 jquery가 나를 위해이 숨겨진 div를 만들 수 있습니까?

Answer 1

즉석에서 요소를 만들고 문서 본문에 추가하면됩니다. 예컨대 :

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); 

Answer 2

나는 카림이 나에게 준 아이디어를 확장하고 다음했다 :

<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>