0

ユーザーがフォームデータを変更できるiFrameを開くファンシーボックスがあります。ファンシーボックスを閉じようとすると、変更を保存するかどうかをユーザーに尋ねられるようにしたいと思います。ボタン「はい」、「いいえ」、「キャンセル」のあるjQuery UIダイアログボックスを使用してこれを行いたいと考えています。このダイアログは、fancybox beforeClose コールバックを使用して生成および表示されます。false を返すことで、ダイアログが表示されている間、fancybox が閉じないようにすることができました。私の質問は、fancybox を閉じるにはどうすればよいですか? $.fancybox.close() を使用すると、fancybox beforeClose コールバックが再度トリガーされます (ループ)。

私のコード:

$.fancybox.open({
    href:'/index.php?task=details_movie',
    type:'iframe',
    padding:10,
    minHeight: '90%',
    beforeClose: function() {
        if ($("#dialog-confirm").length == 0) {
            $("body").append('<div id="dialog-confirm" title="Save changes?"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Do you wish to save any changes made to the details of this movie?</p></div>');
            $("#dialog-confirm").dialog({
                modal:true,
                buttons: [ 
                    { 
                        text: "Yes", 
                        click: function() { 
                            alert("Yes"); // perform save actions
                            $("#dialog-confirm").remove();
                        } 
                    },
                    { 
                        text: "No", 
                        click: function() { 
                            $.fancybox.close(); // this creates the loop back to beforeClose callback
                            $("#dialog-confirm").remove();
                        } 
                    },
                    { 
                        text: "Cancel", 
                        click: function() { 
                            $("#dialog-confirm").remove();
                            return false;
                        } 
                    }
                ]
            });
            $(".ui-widget-overlay").css({"z-index": 99999});
            $(".ui-dialog").css({"z-index": 100000});
        }
        return false;
    }
});
4

1 に答える 1

0

以下の投稿を読んだ後、コードに次の変更を加えて、目的の結果を得ることができました。

fancyBox が閉じないようにするにはどうすればよいですか?

  1. beforeClose コールバックの使用から afterShow コールバックの使用に変更されました
  2. ファンシーボックスの閉じるボタンからのバインドされていないクリックイベント
  3. 以前の beforeClose 関数を含む関数を使用して、fancybox の閉じるボタンの新しいクリック イベントを作成しました。

このようにして、fancybox の閉じるボタンは jQuery UI ダイアログをトリガーし、このダイアログで選択されたボタンに応じて、最初の問題のように beforeClose ループをトリガーすることなく $.fancybox.close() 関数をトリガーできるようになります。

また、ユーザーに強制的に閉じるボタンをクリックさせるために、エスケープ キーを使用して fancybox を閉じる機能を無効にしました。

私の更新されたコード:

$.fancybox.open({
    href:'/index.php?task=details_movie',
    type:'iframe',
    padding:10,
    minHeight: '90%',
    keys : {
        close  : null // prevent close on escape pressed
    },
    afterShow: function() {
        $(".fancybox-close").unbind(); // unbind events from close button
        $(".fancybox-close").click(function() { // create own click event
            if ($("#dialog-confirm").length == 0) {
                $("body").append('<div id="dialog-confirm" title="Save changes?"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Do you wish to save any changes made to the details of this movie?</p></div>');
                $("#dialog-confirm").dialog({
                    modal:true,
                    buttons: [ 
                        { 
                            text: "Yes", 
                            click: function() { 
                                // perform save functions
                                $("#dialog-confirm").remove();
                                $.fancybox.close();
                            } 
                        },
                        { 
                            text: "No", 
                            click: function() { 
                                $("#dialog-confirm").remove();
                                $.fancybox.close();
                            } 
                        },
                        { 
                            text: "Cancel", 
                            click: function() { 
                                $("#dialog-confirm").remove();
                            } 
                        }
                    ]
                });
                $(".ui-widget-overlay").css({"z-index": 99999});
                $(".ui-dialog").css({"z-index": 100000});
            }
        });
    }
});
于 2013-08-29T20:57:43.967 に答える