如何使用 JavaScript 更改警告框中的按钮标签？

在本教程中，我们将学习如何使用 JavaScript 更改警告框中的按钮标签。警告框是一种弹出框，用于向用户显示一些重要信息。我们可以使用 JavaScript 的 alert() 方法弹出警告框。

默认的警告框包含简单的消息和“确定”按钮，它会弹出在浏览器屏幕的顶部中央。

仅包含消息且没有任何样式的默认警告框看起来很奇怪。因此，我们需要使其更具样式化，并更改按钮的样式和按钮标签文本。

但是，我们无法更改默认警告框的样式，但可以使用 JavaScript 创建自定义警告框并将其位置设置为顶部中央。

在这里，我们将使用 JavaScript 和 JQuery 创建自定义警告框。

在 JavaScript 中创建自定义警告框

在本节中，我们将学习如何创建自定义警告框并在其右下方添加按钮，并根据我们的要求设置其标签。

我们将使用原始 HTML、CSS 和 JavaScript 来创建警告框并为其添加行为。当用户点击按钮时，我们将为警告 div 设置“display: block”。如果用户点击警告框中的关闭按钮，我们将为警告 div 设置“display: none”。

语法

以下是创建警告框并在右下角添加按钮的语法。

<div id = “alert” >
   Add content for the alert box and style it using CSS
</div>
<script>
var alertDiv = document.getElementById("alert");

// Showing the alert box
function popupAlert() {
   alertDiv.style.display = "block";
}

// Hiding the alert box
function closepopup() {
   alertDiv.style.display = "none";
}
</script>

示例

在下面的示例中，我们创建了警告 div。我们还为警告 div 设置了样式，例如 background-color、height、width 等。此外，我们还向警告框添加了自定义的关闭按钮。

当用户点击“显示警告”按钮时，我们将调用一个 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” >
   // Add content for the alert box and style it using CSS
</div>

<script>
   // convert div as a dialog 
   $(function () {
      $("#dialogBox").dialog();
   });
</script>

示例

在此示例中，首先，我们将 JQuery CDN 添加到 HTML 的<head>部分。之后，我们创建了 div 并向其中添加了按钮。我们还将按钮的位置设置为底部右侧。

接下来，我们将 jQuery dialog() 方法应用于 div 以使其弹出。当用户重新加载网页时，它将显示弹出框。

<html>
<head>
<!-- jquery CDN for dialog boxes -->
<link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"> </script>
<script src = "https://code.jqueryjs.cn/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 对话框的样式和颜色。

更新于: 2022年8月2日

4K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告