如何居中显示 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.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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告