jQuery open fancybox, wenn die Bedingung erfüllt ist - jquery, iframe, fancybox

Ich habe einen Anker, der eine Fancybox öffnet. Ich möchte, dass die Fancybox nur geöffnet wird, wenn eine Auswahl aus einer Auswahlbox getroffen wird.

Ich habe herausgefunden, dass das Binden eines Klickereignisses an den Anker mit PrevDefault oder Return False das Öffnen der Fancybox nicht verhindert. Ich habe einen Weg gefunden, die Fancybox vom Öffnen abzuhalten. Jetzt habe ich:

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>

Die in fancybox.js definierten Abmessungen (Breite, Höhe usw.) der Fancybox sind an den Klassennamen "Bigfancybox" des Ankers gebunden.

In jQuery habe ich überprüft, ob Match_id ausgewählt wurde:

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

Das alles funktioniert gut, außer wenn die Bedingungerfüllt ist, wird die Fancybox jetzt in Standarddimensionen geöffnet und nicht als Iframe geöffnet, wie dies ohne die jQuery-Bedingung möglich wäre. Gibt es eine Möglichkeit, eine Bedingung zu überprüfen, bevor eine Fancybox in einem Iframe geöffnet wird?

Antworten:

Möglicherweise müssen Sie ein binden click Veranstaltung zu deinem #brasil Wahlschalter (oder zu Ihrem .bigfancybox Wahlschalter, wenn Sie es vorziehen) statt Fancybox.

Bestätigen Sie dann die Bedingung nach dem Veranstaltung und fancy fancybox programmgesteuert ob die Bedingung ist erfüllt, sonst nichts tun (zurückkehren) false) mögen :

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

Sehen JSFIDDLE

HINWEIS :

Die Geige verwendet fancybox v1.3.4, der Code würde jedoch auch für fancybox v2.x problemlos funktionieren. Stellen Sie nur sicher, dass Sie für jede Version die richtigen API-Optionen verwenden.