Question

我有一个打开一个fancybox的锚。我希望只有在从选择框中进行选择时才能打开fancybox。

我发现使用preventDefault将click事件绑定到锚点或返回false并不会阻止fancybox打开。我确实找到了阻止fancybox打开的方法。现在我有：

HTML

<div>
<a id="brasil" href="<?php echo $this->url( array( "module" => "amodule", "controller"  => "acontroller", "action" => "soccer"))?>" class="someclass bigfancybox"><?=$this->translate('soccer')?></a>
</div>

fancybox的尺寸（fancybox.js中定义的宽度，高度等）与锚的类名“bigfancybox”相关联。

在jQuery中，我检查是否对match_id进行了选择：

jQuery("#brasil").fancybox({
onStart: function() {
var matchid = jQuery('#match_id').val();
if(matchid == '')
    {
        alert(selectmatchmessage);
        return false;
    }
}
});

这一切都正常，但是如果满足条件，现在fancybox在默认维度中打开，并且不像没有jQuery条件那样以iframe打开。有没有办法在iframe中打开fancybox之前先检查条件？

Answer 1

您可能必须将click 事件绑定到#brasil选择器（如果您愿意，还是绑定到.bigfancybox选择器）而不是fancybox。

然后，在事件之后验证条件并以编程方式激活fancybox 如果满足条件，否则不执行任何操作（返回false），如：

jQuery("#brasil").on("click", function () {
    var matchid = jQuery('#match_id').val();
    if (matchid !== '') {
        // condition is NOT empty, so fire fancybox
        jQuery.fancybox({
            // fancybox API options
            href: this.href,
            type: "iframe"
        });
    };
    return false; // prevent default and stop propagation
}); // on click

参见 JSFIDDLE

注意：

小提琴使用fancybox v1.3.4，但代码也可以无缝地用于fancybox v2.x，只需确保为每个版本使用正确的API选项。

如果满足条件，则jQuery打开fancybox

1 个答案: