如何居中顯示 JavaScript 的警告訊息框？

在本教程中，我們將學習如何居中顯示 JavaScript 的警告訊息框。在 JavaScript 中，警告訊息框用於向用戶顯示一些訊息、資訊、警告、成功等。讓我們透過一個現實世界的例子來理解它：當您在 Web 瀏覽器上開啟任何網站並開始透過輸入使用者名稱和密碼進行身份驗證時。當您點選提交按鈕時，它會在警告訊息框中顯示一條訊息，例如密碼必須為 8 個或更多字元，或成功登入。

使用者可以使用 JavaScript 的 alert() 方法建立警告訊息框。不幸的是，預設的警告訊息框不允許我們對其進行更改。因此，我們將使用 JQuery 建立自定義警告訊息框並設定其位置，使其出現在瀏覽器視窗的中心。

建立自定義警告訊息框

在這種方法中，我們將使用 jQuery 的 dialog() 方法。jQuery 對話方塊的工作方式與警告訊息框相同。我們可以建立自定義 div 並將警告訊息框的內容新增到該 div 中。

之後，我們可以簡單地使用 id、類名或其他方式在 JavaScript 中訪問該 div，併為該 div 元素呼叫 dialog 方法。現在，div 可以像警告訊息框一樣開啟，在右上角包含關閉按鈕。

使用 dialog() 方法的好處是它會在螢幕中心彈出 div。因此，程式設計師無需新增額外的 CSS 來居中顯示警告訊息框。

語法

使用者可以按照以下語法使用 JQuery dialog() 框將自定義 div 變成警告訊息框。

<div id = "alertWindow" title = "Alert Box">

// content of the alert box
</div>
<script>

   // open the imgInDialog div in the dialog box.
   $(function () {

      // making alert window div to dialog box 
      $(" #div_id ").dialog();
   });
</script>

示例 1

使用 jQuery 對話方塊建立自定義警告訊息框

在下面的示例中，我們建立了一個 id 為“alertWindow”的 div 並添加了歡迎訊息。我們將透過 id 訪問該 div 並應用 dialog() 方法。此外，我們還為警告 div 設定了 title 屬性，該屬性將顯示為警告訊息框的標題。此外，我們在 <head> 中添加了 jQuery CDN 以呼叫 dialog() 方法。

當用戶重新載入網頁時，對話方塊將出現在瀏覽器視窗的中心。

<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: lightgreen;
      color: blue;
      font-size: 20px;
   }
   #dialog {
      text-align: center;
   }
</style>
</head>
<body>
   <h2> Center the JavaScript alert box. </h2>
   <h4> Creating custom alert box using <i> JQuery </i> and set it to center. </h4>
   <!-- content of the dialog box. -->
   <div id = "alertWindow" title = "Alert Box">
   <p> Welcome to the tutorialsPoint! </p>
   <p> Alert box into the center. </p>
   </div>
   <script>
      // open the imgInDialog div in the dialog box.
      $(function () {
         $("#alertWindow").dialog();
      });
   </script>
</body>
</html>

示例 2

使用 CSS 居中顯示警告訊息框

在下面的示例中，我們建立了一個自定義警告訊息框來居中顯示 JavaScript 警告訊息框。在此基礎上，對其進行相應的樣式設定並將其定位到中心。使用“top”和“left”CSS 屬性來實現這一點。將它們設定為 50%，但正如您在下面的按鈕中看到的，為了正確對齊，該屬性為 40%。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   function functionAlert(msg, myYes) {
      var confirmBox = $("#confirm");
      confirmBox.find(".message").text(msg);
      confirmBox.find(".yes").unbind().click(function() {
         confirmBox.hide();
      });
      confirmBox.find(".yes").click(myYes);
      confirmBox.show();
   }
   </script>
   <style>
      #confirm {
         display: none;
         background-color: #F3F5F6;
         color: #000000;
         border: 1px solid #aaa;
         position: fixed;
         width: 300px;
         height: 100px;
         left: 50%;
         margin-left: -100px;
         padding: 10px 20px 10px;
         box-sizing: border-box;
         text-align: center;
      }
      #confirm button {
         background-color: #FFFFFF;
         display: inline-block;
         border-radius: 12px;
         border: 4px solid #aaa;
         padding: 5px;
         text-align: center;
         width: 60px;
         cursor: pointer;
      }
      #confirm .message {
         text-align: left;
      }
   </style>
</head>
<body>
   <div id="confirm">
   <div class="message">This is a warning message.</div>
      <button class="yes">OK</button>
   </div>
   <input type="button" value="Click Me" onclick="functionAlert();" />
</body>
</html>

我們學習瞭如何使用 JQuery dialog() 方法建立自定義警告訊息框。但是，使用者可以使用 JQuery 或原生 JavaScript 從頭開始建立警告訊息框，而無需使用 dialog() 方法。但這需要更多努力，使用者需要設定警告訊息框的位置和樣式。

更新於: 2022年8月2日

9K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.