如何在JavaScript中更改警告框的颜色？

在本教程中，我们将学习如何更改JavaScript中警告框的颜色。此外，我们还将学习如何设置整个警告框的样式，包括警告框的内容。

在JavaScript中，警告框是向用户显示成功、失败或信息消息的最佳方式，当用户在应用程序上执行某些操作时。程序员可以使用`alert()`方法创建默认警告框，但他们无法更改`alert()`框的默认样式。

要更改警告框的样式，程序员需要创建自定义警告框并根据需求设置其样式。

使用JavaScript创建自定义警告框

要使用纯JavaScript创建自定义警告框，用户可以创建一个`div`元素并将警告框的内容添加到其中。此外，他们可以添加关闭按钮并根据需求设置其样式，并将其位置设置在警告框的右下角。此外，程序员可以为警告`div`设置自定义背景颜色。

程序员只需要在想要弹出和隐藏警告框时更改警告框的`display`属性或样式。

语法

用户可以按照以下语法将自定义`div`转换为警告框。

<div id = "alert">
   // content for alert div
</div>
// button to open alert div
<button onclick = 'invokeAlert();'> Show Alert Box </button>
<script>
   var alertDiv = document.getElementById("alert");
   // function to show alert div
   function invokeAlert() {
      alertDiv.style.display = "block";
   }

   // function to close alert div
   function closeDialog() {
      alertDiv.style.display = "none";
   }
</script>

方法

  • 使用`div`元素创建自定义警告框。

  • 设置`div`元素的背景颜色和文本消息的字体颜色。

  • 在示例中使用CSS正确设置关闭按钮和整个警告框的样式。

示例

我们创建了两个函数来显示和隐藏警告框。当用户点击“显示警告框”按钮时，它将调用`invokeAlert()`函数，该函数将为警告`div`设置“display: block”。当用户点击警告框内的“关闭”按钮时，它将调用`closeDialog()`函数，该函数将为警告`div`设置“display: none”以隐藏它。

<html>
<head>
</script>
   <style>
      #alert {
         display: none;
         background-color: rgb(252, 219, 219);
         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: green;
      }
      button {
         border-radius: 12px;
         height: 2rem;
         padding: 7px;
         cursor: pointer;
         border: 2px solid green;
         background-color: aqua;
      }
      #close {
         position: absolute;
         right: 20px;
         bottom: 10px;
      }
   </style>
</head>
<body>
   <h2>Change the color of alert box in Javascript.</h2>
   <h4>Creating custom alert box using <i> vanilla Javascript.</i></h4>
   <div id = "alert">
      <p>Welcome to the tutorialsPoint!</p>
      <button id = "close" onclick = "closeDialog()"> Close</button>
   </div>
   <button onclick = 'invokeAlert();'>Show Alert Box</button>
   <script>
      var alertDiv = document.getElementById("alert");
      function invokeAlert() {
         alertDiv.style.display = "block";
      }
      function closeDialog() {
         alertDiv.style.display = "none";
      }
   </script>
</body>
</html>

本教程将指导用户使用纯JavaScript创建自定义警告框，这就是用户如何更改警告`div`颜色的方法。此外，用户还可以使用JQuery库来自定义警告框的颜色。

更新于：2022年8月8日

9K+ 浏览量

启动你的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.