如何使用 JavaScript 更改警告框中的按钮标签?
在本教程中，我们将学习使用 JavaScript 更改警告框中的按钮标签。警告框是一种弹出框，可用于向用户显示一些重要信息。我们可以使用 JavaScript 的 alert() 方法弹出警告框。
默认警告框包含简单消息和确定按钮，弹出在浏览器屏幕的顶部中心。
默认警告框仅包含消息，没有任何样式，看起来很奇怪。因此，我们需要使其更时尚，并更改按钮的样式和按钮的标签文本。
但是，我们无法更改默认警报框的样式，但可以使用 JavaScript 创建自定义警报框并将其位置设置在顶部中心。
在这里，我们将使用 JavaScript 和 JQuery 创建自定义警报框。
在 JavaScript 中创建自定义警报框
在本节中，我们将学习创建自定义警报框并在右下角添加按钮，并根据我们的要求设置其标签。
我们将使用原始 HTML、CSS 和 JavaScript 来创建和添加警报框的行为。当用户单击按钮时，我们将为警报 div 设置"display: block"。如果用户点击警告框中的关闭按钮，我们将为警告框 div 设置"display: none"。
语法
以下是创建警告框并在右下角添加按钮的语法。
<div id = "alert" >
为警告框添加内容并使用 CSS 设置样式
</div>
<script>
var alertDiv = document.getElementById("alert");
// 显示警告框
function popupAlert() {
alertDiv.style.display = "block";
}
// 隐藏警告框
function closepopup() {
alertDiv.style.display = "none";
}
</script>
示例
在下面的示例中，我们创建了警报 div。我们还为警报 div 指定了样式，例如背景颜色、高度、宽度等。此外，我们还向警报框添加了自定义关闭按钮。
当用户单击显示警报按钮时，我们会调用一个 JavaScript 函数，该函数会将 display: none 更改为 display: block，当用户单击关闭按钮时，它会反转。
<html> <head> </script> <style> #alert { display: none; background-color: yellowgreen; border: 1px solid green; color: black; position: fixed; width: 450px; height: 100px; left: 17%; top: 2%; padding: 6px 8px 8px; text-align: center; } #close { border-radius: 12px; height: 2rem; padding: 7px; cursor: pointer; border: 2px solid green; background-color: aqua; position: absolute; right: 20px; bottom: 20px; } </style> </head> <body> <h2> Change button label to alert / confirmation box. </h2> <h4> Creating custom alert box using JavaScript. </h4> <div id = "alert"> <p> Welcome to the tutorialsPoint! </p> <button id = "close" onclick = "closepopup()"> Close alert box </button> </div> <button onclick = 'popupAlert();'> Show alert </button> <script> var alertDiv = document.getElementById("alert"); function popupAlert() { alertDiv.style.display = "block"; } function closepopup() { alertDiv.style.display = "none"; } </script> </body> </html>
在上面的输出中，用户可以看到，当他们单击"显示警报"按钮时，屏幕上会弹出警报 div，其中包含欢迎消息和自定义关闭按钮。
使用 jQuery Dialog() 方法创建自定义警报框
在本节中，我们将使用 JQuery 的 dialog() 方法，该方法将任何 div 转换为对话框。它不显示任何默认警报框，而是显示自定义警报框，就像我们在上一节中创建的一样。
语法
按照以下语法创建自定义对话框并使用 jQuery dialog() 方法更改按钮标签。
<div id = "dialogBox" >
// 为警报框添加内容并使用 CSS 设置其样式
</div>
<script>
// 将 div 转换为对话框
$(function () {
$("#dialogBox").dialog();
});
</script>
示例
在此示例中，首先，我们将 JQuery CDN 添加到 HTML 的 <head> 部分。之后，我们创建了 div 并将按钮添加到其中。我们还将按钮的位置设置在右下角。
接下来，我们将 jQuery dialog() 方法应用于 div 以使其弹出。当用户重新加载网页时，它将显示弹出框。
<html> <head> <!-- jquery CDN for dialog boxes --> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <!-- CSS --> <style> .ui-widget-header { background: aqua; color: blue; font-size: 18px; } #dialog { text-align: center; } button { padding: 5px; position: absolute; right: 5px; bottom: 0px; background-color: aqua; } </style> </head> <body> <h2> Change button label to alert / confirmation box. </h2> <h4> Changed the button label using JQuery Dialog() method. </h4> <!-- content of the dialog box. --> <div id = "dialog" title = "Alert Box"> <p> Welcome to the tutorialsPoint! </p> <button> Submit Button </button> </div> <script> // pop up the dialog box when web page loads $(function () { $("#dialog").dialog(); }); </script> </body> </html>
当用户调用上述代码时，他们将在屏幕上看到一个自定义对话框，该对话框的右下角包含提交按钮。但是，我们没有添加任何提交功能，只是更改了按钮的标签。
在本教程中，我们学习了自定义警告框的按钮标签。此外，我们还学习了自定义整个警告框，而不是仅自定义按钮。在第二个示例中，我们更改了 jQuery 对话框的样式和颜色。
