📅 最后修改于: 2023-12-03 15:16:45.574000 🧑 作者: Mango
jQuery UI 是一个开源的前端 JavaScript 库，它为 Web 开发提供了丰富的用户界面组件和特性。其中，对话框 Dialog 是一个常用的组件，用于呈现模态的对话框窗口。
对话框 Dialog 支持多种选项，其中 maxHeight 选项用于设置对话框的最大高度。
maxHeight 选项可以接受一个整数值或者字符串，用于设置对话框的最大高度。例如：
$( "#dialog" ).dialog({
maxHeight: 500
});
这里设置了对话框的最大高度为 500 像素。
maxHeight 的值也可以设置为 "auto"，表示对话框的高度可以自适应内容。
$( "#dialog" ).dialog({
maxHeight: "auto"
});
以下代码演示了如何使用 maxHeight 选项设置对话框的最大高度：
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog maxHeight Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
maxHeight: 300
});
} );
</script>
</head>
<body>
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat enim sed ipsum luctus, quis bibendum tortor laoreet. Aenean eu consequat arcu. Cras maximus efficitur velit non facilisis. Morbi vel lorem imperdiet, feugiat diam a, dapibus diam. Nulla facilisi. Etiam sit amet libero porttitor, interdum quam in, tristique tellus. </p>
<p>Suspendisse ac suscipit nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sit amet tempor massa, eget pellentesque ipsum. Aliquam sed placerat purus. Nam ornare lectus purus, sed cursus neque tincidunt in. Nulla id ante in libero elementum porttitor. Integer vulputate congue est sit amet maximus. Sed vel pharetra turpis. Duis tincidunt elit elit, vitae ultricies felis vulputate vel. Nam placerat molestie mi, at venenatis leo finibus eu. </p>
<p>Mauris quis ipsum eu sem tincidunt bibendum. Aliquam ut condimentum nisi. Donec eu quam a mauris faucibus ultrices. Praesent sed sapien ut odio vehicula pretium id ut augue. Nullam leo quam, faucibus ac metus a, tristique imperdiet metus. Pellentesque eget ullamcorper orci. Aliquam vel lorem vitae nulla pharetra congue sit amet et enim. Cras eu facilisis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
</div>
</body>
</html>
使用 maxHeight 选项可以控制对话框的最大高度，从而防止对话框因为内容太多而变得不美观。