动态调用fancybox

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

然后是脚本：

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

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

我扩展了karim给我的想法，并做了以下操作：

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