如果满足条件，jQuery打开fancybox

Question

我有一个可以打开花式框的锚。我希望仅在从选择框中进行选择时才打开花式框。

我发现使用 preventDefault 或 return false 将点击事件绑定到锚点并不会阻止花式框打开。 我确实找到了阻止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 中打开花式框之前先检查条件？

Answer 1

您可能需要将click 事件 绑定到您的#brasil 选择器（或者如果您愿意，也可以绑定到您的.bigfancybox 选择器）而不是fancybox。

然后，验证事件之后的条件并以编程方式触发fancybox

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

注意：

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