web-dev-qa-db-ja.com

はいまたはいいえjQueryを使用してボックスを確認

[OK]/[キャンセル]ボタンの代わりに、jQueryを使用して[はい]/[いいえ]のアラートを表示します。

jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';                  
jConfirm('Are you sure??',  '', function(r) {
    if (r == true) {                    
        //Ok button pressed...
    }  
}

他の選択肢はありますか？

jqueryalertsjconfirm
109
Sushanth CS
ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
    $('<div></div>').appendTo('body')
    .html('<div><h6>'+message+'?</h6></div>')
    .dialog({
        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
        width: 'auto', resizable: false,
        buttons: {
            Yes: function () {
                // $(obj).removeAttr('onclick');                                
                // $(obj).parents('.Parent').remove();

                $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

                $(this).dialog("close");
            },
            No: function () {                                                                 
                $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });
};

デモ を見つけてください。

116
Thulasiram

Alertメソッドは、ユーザーが閉じるまで実行をブロックします。

確認機能を使用します。

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}
99
Ana El Bembo

私はこれらのコードを使用しました：

HTML：

<a id="delete-button">Delete</a>

jQuery：

<script>
$("#delete-button").click(function(){
    if(confirm("Are you sure you want to delete this?")){
        $("#delete-button").attr("href", "query.php?ACTION=delete&ID='1'");
    }
    else{
        return false;
    }
});
</script>

これらのコードは私にはうまくいきますが、これが正しいかどうかはよくわかりません。どう思いますか？

47
user3678239

このjQueryプラグインを見てください。 jquery.confirm 。

<a href="home" class="confirm">Go to home</a>

その後：

$(".confirm").confirm();

リンクをたどる前に確認のポップアップが表示されます。

ここにデモがあります。 http://myclabs.github.com/jquery.confirm/

28
Matthieu Napoli

私が見たすべての例は、さまざまな「はい/いいえ」タイプの質問に再利用できません。私は私がコールバックを指定できるように何かを探していたので、私はどんな状況でも電話をかけることができました。

以下は私にとってうまくいっています：

$.extend({ confirm: function (title, message, yesText, yesCallback) {
    $("<div></div>").dialog( {
        buttons: [{
            text: yesText,
            click: function() {
                yesCallback();
                $( this ).remove();
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).remove();
            }
        }
        ],
        close: function (event, ui) { $(this).remove(); },
        resizable: false,
        title: title,
        modal: true
    }).text(message).parent().addClass("alert");
}
});

私はそれをこう呼びます。

var deleteOk = function() {
    uploadFile.del(fileid, function() {alert("Deleted")})
};

$.confirm(
    "CONFIRM", //title
    "Delete " + filename + "?", //message
    "Delete", //button text
    deleteOk //"yes" callback
);
10
MSquared

私はダイアログボックスから答えを取り戻すのに苦労しましたが、結局この他の質問からの答えを組み合わせることによって解決策を思いついた 表示 - はい - いいえ - ボタン - 代わりに - OK - キャンセル - ） in-confirm-box モーダル確認ダイアログのコードの一部

これは他の質問に対して提案されたものです：

あなた自身の確認ボックスを作成してください：

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

あなた自身のconfirm()メソッドを作成してください：

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

あなたのコードでそれを呼び出します。

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

私の変更点私はconfirmBox.show()を呼ぶ代わりにconfirmBox.dialog({...})を使うように上記を微調整しました

confirmBox.dialog
    ({
      autoOpen: true,
      modal: true,
      buttons:
        {
          'Yes': function () {
            $(this).dialog('close');
            $(this).find(".yes").click();
          },
          'No': function () {
            $(this).dialog('close');
            $(this).find(".no").click();
          }
        }
    });

私が行った他の変更は、ThulasiRamが彼の答えで行ったように、doConfirm関数内にconfirmBox divを作成することでした。

2
J F

私はOkとCancelボタンに翻訳を適用する必要がありました。動的テキストを除くようにコードを変更しました（私の翻訳機能を呼び出します）。

$.extend({
    confirm: function(message, title, okAction) {
        $("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            width: 500,
            buttons: [{
                text: localizationInstance.translate("Ok"),
                click: function () {
                    $(this).dialog("close");
                    okAction();
                }
            },
                {
                text: localizationInstance.translate("Cancel"),
                click: function() {
                    $(this).dialog("close");
                }
            }],
            close: function(event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});
0
Jim