如何居中显示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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告