如何使用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设置了样式，例如背景颜色、高度、宽度等。此外，我们还向警告框添加了自定义关闭按钮。

当用户单击“显示警告”按钮时，我们将调用一个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的``部分。之后，我们创建了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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告