Question

确认（＆＃34;您是否希望继续（字段）缺少数据？＆＃34;）;

想要仅使用java-script重命名确认框上的按钮名称？

我不想包含另一个Jquery。

Answer 1

创建自定义框

   group1 group2 feature value1 value2
1:      A      B       x      1      2
2:      A      C       x      1      1
3:      B      C       x      2      1
4:      A      B       y      3      2
5:      C      A       z      1      2

创建方法

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

调用方法

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();
}

Answer 2

您需要使用 jquery 进行自定义。 fiddle

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();
}

$(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {
            form.submit();
        }, function no() {
            // do nothing
        });
    });
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
    <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>

Answer 3

据我所知，这在Javascript提供的默认模态/警报中是不可能的。因此，如果要创建自己的自定义确认对话框，则需要查看创建自己的警报或使用Javascript库。幸运的是，您不是第一个想要创建自定义警报的人，所以有很多来源可以帮助您。

对于初学者，请尝试查看这些问题的答案：

在javascript自定义按钮

3 个答案: