如何居中顯示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 Dialog建立自定義警告框

在下面的示例中，我們建立了一個id為“alertWindow”的div並添加了歡迎訊息。我們將透過id訪問div並應用`dialog()`方法。我們還為警告div設定了title屬性，它將顯示為警告框的標題。此外，我們在``中添加了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.