0

.in.outクラスでCSSアニメーションを実行している次のコードがあります。私の問題は、ダイアログがすぐに閉じて、閉じるアニメーションがまったく表示されないことです。したがって、ダイアログを閉じる前に約500ミリ秒の遅延が必要です。

$.extend( $.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
        $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    }
});

$confirm.dialog({

    buttons: {

        "ok": {
            text:'Ok',
            click: function() { $(this).dialog('close'); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { $(this).dialog('close'); }
        }
    },

    beforeClose: function(event, ui) {

        $('.ui-dialog').removeClass('in').addClass('out');

    }

}).dialog('widget').appendTo('.dialogWrapper');

に追加return falseしてbeforeCloseから手動で関数を呼び出してみました.dialog('close')が、それは無限ループを実行するだけで、ダイアログを手動で非表示にすることは無駄なコードのようです(ダイアログのオーバーレイも削除する必要があることは言うまでもありません)

この件について何か助けていただければ幸いです。

Si。

4

4 に答える 4

1

これはテストされていませんが、これらの線に沿った何かがあなたを望む場所に連れて行くと思いますか???

$.extend( $.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
        $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    }
});

$confirm.dialog({

    buttons: {

        "ok": {
            text:'Ok',
            click: function() { closeDialog(this); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { closeDialog(this); }
        }

    }).dialog('widget').appendTo('.dialogWrapper');

function closeDialog(element){
        $(element).removeClass('in').addClass('out');
        $(element).delay(500);
        $(element).dialog('close');
}
于 2012-11-25T13:43:45.530 に答える
0

これを実行してテストすることにしました。必要なコードは次のとおりです。これもかなり洗練されています。

<script type="text/javascript">
    function showDialog() {
        $('#myDialog').on("dialogbeforeclose", function (event, ui) { });
        $('#myDialog').dialog({
            beforeClose: function myCloseDialog() {
                alert('Closing Dialog Now...');
            }
        });
    }

</script>
于 2012-11-26T20:02:16.787 に答える
0

David Lloyd Brookes さん、返信ありがとうございます。ここでこのコードに到達するために必要な出発点でした:

// function to close dialog using css animations.
$.fn.animateDialogClose = function() {
    var $dialog = $(this);
    $dialog.parents('.ui-dialog').removeClass('in').addClass('out');
    setTimeout( function() { $dialog.dialog('close'); }, 500);
};


$confirm.dialog({
    buttons: {
        "ok": {
            text:'Ok', class:'btn red',
            click: function() {  }
        },
        "cancel": {
            text:'Cancel', class:'btn',
            click: function() { $(this).animateDialogClose(); }
        }
    }

}).dialog('widget').appendTo('.ui-dialog-perspective-wrapper');

ただし、これはボタンに設定されたボタンにのみ明示的に適用され、(たとえば) 'X' 閉じるボタンやエスケープ キーには適用されないという残念な問題がまだあります。私は賛成票を投じますが、あなたが私の質問に答えたとは思いません...答えさえないかもしれません:(

于 2012-11-25T19:07:20.490 に答える