CSS jQuery UI对话框的固定定位

在本文中，我们将介绍如何使用CSS和jQuery UI来实现对话框的固定定位。固定定位可以让对话框始终显示在页面中的特定位置，无论页面滚动与否。

阅读更多：CSS 教程

什么是jQuery UI对话框？

jQuery UI是一个流行的JavaScript库，提供了一套丰富的用户界面组件和交互效果。其中一个常用的组件是对话框（dialog）。它可以用于显示警告、确认信息或者显示表单等内容。

CSS固定定位

在CSS中，我们可以使用固定定位（fixed positioning）来使一个元素始终保持在页面中的固定位置。元素使用固定定位将不会随页面的滚动而移动。下面是一个例子：

.dialog-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
  z-index: 9999;
}

在上面的例子中，我们将对话框的定位设置为固定（position: fixed）。然后使用top: 50%和left: 50%将其放置在页面的中心位置。transform: translate(-50%, -50%)用于将对话框居中对齐。接下来，我们设置了对话框的宽度、高度、背景颜色和边框样式。最后，我们使用z-index属性来设置对话框的层级，确保它在其他元素之上显示。

结合jQuery UI实现固定定位的对话框

现在，让我们结合jQuery UI来实现固定定位的对话框。首先，我们需要引入jQuery和jQuery UI的库文件。然后，在HTML中创建一个空的div元素，并赋予一个唯一的id。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .dialog-box {
      /* CSS 样式 */
    }
  </style>
</head>
<body>
  <div id="dialog-box" class="dialog-box"></div>
</body>
</html>

接下来，在JavaScript中，我们可以使用jQuery的.dialog()方法来创建一个对话框，并设置其相关属性。

$(function() {
  $("#dialog-box").dialog({
    modal: true,   // 创建一个模态对话框
    autoOpen: false,   // 初始状态下不打开对话框
    width: 400,   // 对话框的宽度
    height: 200,   // 对话框的高度
    draggable: false,   // 禁止对话框拖动
    resizable: false,   // 禁止对话框调整大小
    position: { my: "center", at: "center", of: window }   // 对话框的位置
  });
});

在上面的代码中，我们使用$("#dialog-box")选择器来获取对话框的元素，并对其调用.dialog()方法。我们设置了modal属性为true，这样对话框将以模态（modal）形式显示，背后的页面将被遮蔽。autoOpen属性设置为false，表示初始状态下对话框不会自动打开。接下来，我们设置了对话框的宽度、高度、是否可拖动和调整大小等属性。最后，我们使用position属性来设置对话框的位置，使用my: "center", at: "center", of: window将其居中显示。

现在，我们可以通过调用.dialog("open")方法来打开对话框了。

$("#dialog-box").dialog("open");

示例

下面是一个完整的示例，演示了如何使用CSS和jQuery UI创建一个固定定位的对话框。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .dialog-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 200px;
      background-color: white;
      border: 1px solid black;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <button id="open-dialog">打开对话框</button>
  <div id="dialog-box" class="dialog-box">
    <p>这是一个固定定位的对话框。</p>
    <button id="close-dialog">关闭</button>
  </div>

  <script>
    (function() {("#open-dialog").click(function() {
        ("#dialog-box").dialog("open"); });("#dialog-box").dialog({
        modal: true,
        autoOpen: false,
        width: 400,
        height: 200,
        draggable: false,
        resizable: false,
        position: { my: "center", at: "center", of: window }
      });

      ("#close-dialog").click(function() {("#dialog-box").dialog("close");
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了一个“打开对话框”的按钮和一个<div>元素作为对话框的容器。按钮的点击事件调用了$("#dialog-box").dialog("open")来打开对话框。对话框中有一个“关闭”按钮，点击它调用了$("#dialog-box").dialog("close")来关闭对话框。