如何使用 JavaScript 更改确认框中的按钮标签?
在本教程中，我们将学习使用 JavaScript 更改确认框中的按钮标签。确认框对于从用户那里获取确认非常有用。例如，当您尝试从某些网站上的帐户中删除某些内容时，它们会向您显示一个弹出框，其中包含一条消息，例如"您确定要删除……吗?"。此外，它还包含是和否按钮，这是应用程序从用户那里获取的一种确认。
JavaScript 用户可以使用 .confirm() 方法创建确认框，该方法包含确认消息字符串、ok 和 cancel 按钮。如果程序员使用默认确认框，则无法更改确认框样式和按钮标签。因此，我们将在本教程中创建自定义确认框。
使用 JavaScript 创建自定义确认框
程序员只能使用 HTML、CSS 和 JavaScript 来创建自定义确认框。我们可以创建一个 div 并将内容添加到确认框，包括该 div 中的确认框按钮。此外，我们可以根据需要设置 div 及其内容的样式。我们可以创建函数，当用户单击按钮时显示和隐藏确认框。
语法
我们可以按照以下语法创建具有不同按钮标签的自定义确认框。
<div id = "confirm">
// 在此处添加确认消息
// 自定义按钮
<div class="close">
<button onclick = "closeConfirm()"> Yes </button>
<button onclick = "closeConfirm()"> No </button>
</div>
</div>
<button onclick = 'showConfirm()''> Show confirm Box </button>
<script>
var confirmedDiv = document.getElementById("confirm");
// 显示确认框的函数
function showConfirm() {
confirmedDiv.style.display = "block";
}
// 隐藏确认框的函数
function closeConfirm() {
confirmedDiv.style.display = "none";
}
</script>
示例 1
在下面的示例中，我们创建了自定义 div，其中包含确认消息和两个带有标签"是"和"否"的按钮。我们已设置确认框的样式，并将按钮设置在 div 的右下角。
我们有一个名为显示确认框的按钮，当用户单击该按钮时，我们将调用一个函数，该函数将为确认框设置"display: block"。当用户单击确认框中的任何按钮时，它将调用将确认框的"display: none"设置为隐藏它的函数。
但是，程序员可以为确认框的按钮添加不同的功能，而不仅仅是关闭确认框。
<html> <head> <style> #confirm { display: none; background-color: rgb(194, 195, 251); border: 1px solid green; position: fixed; height: 80px; width: 250px; left: 40%; top: 2%; padding: 6px 8px 8px; text-align: center; } p { font-size: 18px; color: red; } button { border-radius: 12px; height: 2rem; padding: 7px 10px; cursor: pointer; border: 2px solid green; background-color: aqua; margin: 5px; } .close { display: flex; position: absolute; right: 20px; bottom: 0px; } </style> </head> <body> <h2> Change the button label in confirm box in JavaScript. </h2> <h4> Creating custom confirm box using <i> vanilla JavaScript. </i> </h4> <div id="confirm"> <p> Are you sure to delete .....? </p> <div class = "close"> <button onclick = "closeConfirm()"> Yes </button> <button onclick = "closeConfirm()"> No </button> </div> </div> <button onclick='showConfirm()''> Show confirm Box </button> <script> var confirmDiv = document.getElementById("confirm"); function showConfirm() { confirmDiv.style.display = "block"; } function closeConfirm() { confirmDiv.style.display = "none"; } </script> </body> </html>
示例 2
使用 jQuery 和 CSS 更改按钮标签
在下面的示例中，我们更改了确认框中的按钮标签。尝试运行以下代码。该代码使用 JavaScript 库 jQuery 和 CSS 创建一个确认框，其按钮标签与标准确认框不同 –
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function functionConfirm(msg, myYes, myNo) { var confirmBox = $("#confirm"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function() { confirmBox.hide(); }); confirmBox.find(".yes").click(myYes); confirmBox.find(".no").click(myNo); confirmBox.show(); } </script> <style> #confirm { display: none; background-color: #91FF00; border: 1px solid #aaa; position: fixed; width: 250px; left: 50%; margin-left: -100px; padding: 6px 8px 8px; box-sizing: border-box; text-align: center; } #confirm button { background-color: #48E5DA; display: inline-block; border-radius: 5px; border: 1px solid #aaa; padding: 5px; text-align: center; width: 100px; cursor: pointer; } #confirm .message { text-align: left; } </style> </head> <body> <div id="confirm"> <div class="message"></div> <button class="yes">Like!</button> <button class="no">No, I Like Cricket!</button> </div> <button onclick = 'functionConfirm("Do you like Football?", function yes() { alert("Yes") }, function no() { alert("no") });'>submit</button> </body> </html>
我们已经学会了通过创建自定义确认框来更改确认框按钮的标签。此外，我们还可以使用自定义库来设置确认框的样式。现在，我们可以根据确认消息设置确认框中的按钮标签。
