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

Posted 2023-02-22

【中文标题】在确认对话框中显示是/否而不是确定

【英文标题】：Show yes/no instead of OK in confirmation dialog

【发布时间】：2017-05-10 18:19:30

【问题描述】：

如何在简单的 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/ 但我还是不明白。需要帮助！

【问题讨论】：

function doConfirm("Are you sure?", yesFn, noFn) 应该是function doConfirm(msg, yesFn, noFn)

你有什么意见t4t5.github.io/sweetalert

【参考方案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>

【参考方案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>