如何使用 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 設定了樣式，例如 background-color、height、width 等。此外，我們還向警告框添加了自定義的關閉按鈕。

當用戶點選“顯示警告”按鈕時，我們將呼叫一個 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 的<head>部分。之後，我們建立了 div 並向其中添加了按鈕。我們還將按鈕的位置設定為底部右側。

接下來，我們將 jQuery dialog() 方法應用於 div 以使其彈出。當用戶重新載入網頁時，它將顯示彈出框。

<html>
<head>
<!-- jquery CDN for dialog boxes -->
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src = "https://code.jquery.com/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+ 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告