首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将jQuery对话框置于中心位置?

要将jQuery对话框置于中心位置,您可以使用以下方法:

  1. 首先,确保您已经在项目中引入了jQuery和jQuery UI库。
  2. 在CSS中,为jQuery对话框添加以下样式:
代码语言:css
复制
.ui-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这将使对话框在垂直和水平方向上居中。

  1. 在JavaScript中,创建一个jQuery对话框实例:
代码语言:javascript
复制
$("#your-dialog-id").dialog({
  modal: true,
  width: "auto",
  height: "auto",
  position: {
    my: "center",
    at: "center",
    of: window
  }
});

这将创建一个在窗口中心位置的模态对话框。

完整的示例代码如下:

代码语言:html
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Centered jQuery Dialog</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <style>
    .ui-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
 <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id="your-dialog-id" title="Centered Dialog">
    <p>This is a centered jQuery dialog.</p>
  </div>
 <script>
    $(document).ready(function() {
      $("#your-dialog-id").dialog({
        modal: true,
        width: "auto",
        height: "auto",
        position: {
          my: "center",
          at: "center",
          of: window
        }
      });
    });
  </script>
</body>
</html>

这样,您就可以在网页上创建一个居中的jQuery对话框了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券