使用jQuery UI 的对话框，将其位置固定在中心

简介

jQuery UI 是一个非常流行的 jQuery 插件，可以轻松创建漂亮的用户界面元素，如对话框、下拉框、日期选择器、进度条等等。其中，对话框是经常被使用的一种元素，但是在某些情况下，我们需要将对话框的位置固定在页面的中心，而不是像默认的那样在页面的左上角。

解决方案

我们可以很容易地使用 jQuery UI 的对话框，将其位置固定在页面的中心。

步骤

1. 首先，引入 jQuery 和 jQuery UI 的库文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. 然后，创建一个基本的对话框：

<div id="dialog" title="Dialog Title">Dialog Content</div>

3. 通过 JavaScript，初始化对话框，并将其位置固定在页面的中心：

$(function() {
  $("#dialog").dialog({
    modal: true,      // 使用模式对话框
    width: 400,       // 设置对话框的宽度
    height: "auto",   // 设置对话框的高度为自适应
    position: {       // 将对话框位置固定在中心
      my: "center",
      at: "center",
      of: window
    }
  });
});

最终的效果如下图所示：

总结

在本文中，我们学习了如何使用 jQuery UI 的对话框，并将其位置固定在页面的中心。这是一个非常实用的技巧，可以让你的网站更加美观和易用。希望这篇文章对你有所帮助！