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

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

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

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

使用 JavaScript 创建自定义警告框

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

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

语法

用户可以按照以下语法将自定义 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 设置“dispaly: 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+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告