在确认对话框中显示是/否而不是确定

Question

如何在简单的 javascript 确认对话框中显示是而不是确定。我对javascript没有更多的了解，那么最简单的方法是什么？我尝试了一些代码，但没有得到结果。

function doConfirm("Are you sure?", yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
        confirmBox.prev().remove();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
    var overlay = $("<div>").css({
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(255,255,255,0.5)"
    }).insertBefore(confirmBox);
}

$(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {
            form.submit();
        }, function no() {
           return false;
        });
    });
});

body { font-family: sans-serif; }
#confirmBox
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#confirmBox .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

<form method="post" action="">
    <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <input type="submit" value="Delete My Data" />
</form>
<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

也试过这个http://jsfiddle.net/Xtreu/269/

http://jsfiddle.net/Xtreu/270/ 但我还是不明白。需要帮助！

Answer 1

在#confirmBox html 中，您应该像这样使用 定义按钮：

<a class='button' href="#" title="some text for tooltip" onclick="doYesAction)"> Yes  </a>
<a class='button' href="#" title="some text for tooltip" onclick="doNoAction)"> No  </a>

Answer 2

您可以在脚本标签中使用 ajax 调用，如下所示：

            $('#divDeleteDialog').dialog({
                title: "Delete User",
                resizable: false,
                draggable: false,
                width: "400px",
                modal: true, // only this dialog is active
                buttons: {
                    "Yes": function () {
                        $('#txtDID').html('');
                        $.ajax({
                            url: "WebService.asmx/DeleteUser",
                            type: "post",
                            contentType: "application/json; charset=utf-8",
                            data:
                                JSON.stringify(
                                 { "id": $('#txtDID').val() }

                                ), // parameters
                            beforeSend: function () {
                                $('#loader').html('<img src="Images/loading.gif" />');
                            },

                            success: function (result) {
                                $('#loader').html('');

                            },
                            error: function () {
                                alert('error Deleteing user');
                            }
                        });
                        //  modify existing data 


                        $('#txtDID').val('');
                        $('#txtDFName').val('');
                        $('#txtDLName').val('');
                        $('#txtDEmail').val('');

                        $('#divDeleteDialog').dialog('close');
                        tr.fadeOut(2000);
                    },
                    "No": function () {
                        $('#divDeleteDialog').dialog('close');
                    }
                }
            });

显示数据的对话框和两个按钮（是，否）：

   <div id="divDeleteDialog" style="display:none">
        <h4>  you are going to permenantly delete this user ?  </h4>
         <div class="form-group-sm">
            <label for="txtDID">ID</label>
            <input type="text" id="txtDID" class="form-control" disabled/>
        </div>
        <div class="form-group-sm">
            <label for="txtDFName">First Name</label>
            <input type="text" id="txtDFName" class="form-control" disabled/>
        </div>
        <div class="form-group-sm">
            <label for="txtDLName">Last Name</label>
            <input type="text" id="txtDLName" class="form-control" disabled/>
        </div>
         <div class="form-group-sm">
            <label for="txtDEmail">Email
            </label>
            <input type="text" id="txtDEmail" class="form-control" disabled/>
        </div>
              <h4>  are you sure?  </h4>
    </div>