自定义 JavaScript“确认”对话框上的按钮标签[重复]

Question

我已经尝试过这些代码来显示是或否命令作为弹出图标。但它显示的是确定和取消按钮。如果有人可以向我提出一个想法，这将对我的项目有所帮助。我在下面添加了我的代码

<script type = "text/javascript">
function Confirm() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";
    if (confirm("Do you want to block hour?")) {
        confirm_value.value = "Yes";
    } else {
        confirm_value.value = "NO";
    }
    document.forms[0].appendChild(confirm_value);
}

Answer 1

您必须创建自己的确认对话框，无法更改确认功能显示的对话框中的按钮。

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() {
  console.log(`yes`);
}, function no() {
  console.log(`no`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="confirmBox">
  <div class="message"></div>
  <span class="yes">Yes</span>
  <span class="no">No</span>
</div>

或者更定制一点：

function doSomething() {
  document.getElementById('id_confrmdiv').style.display = "block"; 

  document.getElementById('id_truebtn').onclick = function() {
    //do your delete operation
    alert('true');
  };

  document.getElementById('id_falsebtn').onclick = function() {
    alert('false');
    return false;
  };
}

body {
  font-family: sans-serif;
}

#id_confrmdiv {
  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;
}

#id_confrmdiv .button {
  background-color: #ccc;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #aaa;
  padding: 2px;
  text-align: center;
  width: 80px;
  cursor: pointer;
}

#id_confrmdiv .button:hover {
  background-color: #ddd;
}

#confirmBox .message {
  text-align: left;
  margin-bottom: 8px;
}

<div id="id_confrmdiv">confirmation
  <button id="id_truebtn">Yes</button>
  <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

Answer 2

浏览器的API不支持自定义按钮。确定和取消是您唯一可以获得的按钮。

如果您想要自定义弹出按钮，您可以使用库来制作弹出窗口，例如 alertify。

Answer 3

根据我的说法，你无法更改标准的 javascript 弹出按钮标签。如果您想这样做，您可以使用 jquery-ui 或者您可以创建自己的自定义弹出窗口并检查按钮点击情况。这是比使用默认弹出窗口更好的方法，因为 UI 因浏览器而异。