如何在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.