0

確認ボックスには、[OK]と[キャンセル]の2つのオプションしかありません。

自分で作成したいので、3番目のボタンを追加できます：保存して続行します。しかし、現在解決方法がわからない問題は、カスタム確認ダイアログが表示されたら、以前に実行していたスクリプト（またはナビゲーション）の実行をブロックするにはどうすればよいですか？次に、確認のためにボタンに値を返すようにするにはどうすればよいですか？

確認ダイアログボックスについての私の理解は次のとおりです。これは視覚的なブール値であり、ページ上のナビゲーションとスクリプトをブロックする機能があります。では、どうすればそれをエミュレートできますか？

4

2 に答える 2

3

信頼できる実証済みのソリューションが必要な場合は...jQueryを使用してください...安っぽいIEなどを心配することなくすべてのブラウザで動作します。http ：//jqueryui.com/demos/dialog/

于 2012-06-26T14:28:41.110 に答える
2

javascriptでは、ユーザーアクションを待っている間は停止しません。ダイアログが閉じるときに呼び出すコールバック（関数）を設定します。

小さなダイアログライブラリの例を次に示します。ここでは、コールバックを渡す方法を確認できます。

dialog = {};

dialog.close = function() {
    if (dialog.$div) dialog.$div.remove();
    dialog.$div = null;
};

// args.title
// args.text
// args.style : "", "error"  (optionnel)
// args.buttons : optional : map[label]->function the callback is called just after dialog closing
// args.doAfter : optional : a callback called after dialog closing
dialog.open = function(args) {
    args = args || {};
    if (this.$div) {
        console.log("one dialog at a time");
        return;
    }
    var html = '';
    html += '<div id=dialog';
    if (args.style) html += ' '+args.style;
    html += '><div id=dialog-title>'; 
    html += '</div>';
    html += '<div id=dialog-content>';
    html += '</div>';
    html += '<div id=dialog-buttons>';
    html += '</div>';
    html += '</div>';
    this.$div=$(html);
    this.$div.prependTo('body');
    $('#dialog-title').html(args.title);
    $('#dialog-content').html(args.text);
    var buttons = args.buttons || {'Close': function(){return true}};
    for (var n in buttons) {
        var $btn = $('<input type=button value="'+n+'">');
        $btn.data('fun', buttons[n]);
        $btn.click(function(){
            if ($(this).data('fun')()) {
                dialog.close();
                if (args.doAfter) args.doAfter();
            }
        });
        $btn.appendTo($('#dialog-buttons'));
    }
    this.$div.show('fast');
    shortcuts.on('dialog', {
        27: function(){ // 27 : escape
            dialog.close();
        }
    }); 
}

2つの呼び出しサンプル：

dialog.open({
    title: 'ccccc Protection Error',
    text: 'There was an error related to cccc Protection. Please consult <a href=../cccc.jsp>this page</a>.',
    style: 'error'
});

var ok = false;
dialog.open({
        title: sometitle,
        text: someHtmlWithInputs,
        buttons: {
            'OK': function() {
                if (// inputs are valid) ok = true;
                return true;
            },
            'Cancel': function() {
                return true;
            }
        },
        doAfter: function() {
            if (ok) {
                if (newvg) {
                    cccmanager.add(vg);
                } else {
                    cccmanager.store();
                }
                if (doAfter) doAfter();
            } 
        }
    });

他の人が指定しているように、ダイアログを作成するだけの場合は、独自のライブラリは必要ない場合があります。

于 2012-06-26T14:34:40.307 に答える