jquery - 条件文からファンシーボックスを開き、クラスを追加するにはどうすればよいですか?

Question

4 つのドラッグ オブジェクトとのドラッグ アンド ドロップ操作があり、ユーザーがすべてのドラッグ要素を正しいターゲットに配置した後、fancybox を使用してフィードバック ボックスを開きたい - すべての間違った回答は、ドラッグ オブジェクトを元の位置に戻します。送信ボタンでクリック イベントを登録する別のインタラクションのファンシー ボックスを開く方法を理解できましたが、これは "if" ステートメントから起動する必要があります。解決策を探した後、ファンシーボックスを開いてフィードバックメッセージを含むhtmlページをロードする方法を見つけましたが、コンテンツをフォーマットするカスタムクラスを追加する方法がわかりません.

他のファンシーボックスポップアップを正常に起動した方法は次のとおりです。

<div class="image right">
    <a class="have-popup fancybox.ajax" href="ajax/shire_lifecycle_05b.html"><img src="css/images/image5.jpg" alt="" /></a>>

上記のクラスを以下のコードに追加する必要があります。どんな助けでも大歓迎です。

var correctSr18 = 0;


 $('.steps-drag-drop .dragable .drag-item').draggable({ 
    snap: ".placeholder",
    revert: "invalid", 
    snapMode: "inner"


});

$(".steps-drag-drop .placeholder1").droppable({
  accept : ".step2",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;




    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $( this ).addClass( "have-popup fancybox.ajax" );
    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'                

    }
], {
    padding : 0

})

}
  }
});

$(".steps-drag-drop .placeholder2").droppable({
  accept : ".step3",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;

    //alert(correctSr18);

    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'                

    }
], {
    padding : 0
});

}
  }
});

$(".steps-drag-drop .placeholder3").droppable({
  accept : ".step1",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;
    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'
    }
], {
    padding : 0
});

}
  }
});

$(".steps-drag-drop .placeholder4").droppable({
  accept : ".step4",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;
    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'
    }
], {
    padding : 0
});

}
  }
});