如何在 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+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.