要将jQuery对话框置于中心位置,您可以使用以下方法:
.ui-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这将使对话框在垂直和水平方向上居中。
$("#your-dialog-id").dialog({
modal: true,
width: "auto",
height: "auto",
position: {
my: "center",
at: "center",
of: window
}
});
这将创建一个在窗口中心位置的模态对话框。
完整的示例代码如下:
<!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对话框了。
领取专属 10元无门槛券
手把手带您无忧上云