jQuery UI 实例 - 对话框（Dialog）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 对话框（Dialog）示例</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>
<style>
#dialog { display: none; }
</style>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").on("click", function() {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog" title="对话框标题">
<p>这是一个简单的对话框示例。</p>
</div>
<button id="opener">打开对话框</button>
</body>
</html>这段代码演示了如何使用jQuery UI创建一个对话框，并定义了打开和关闭对话框时的动画效果。当用户点击"打开对话框"按钮时，将以"盲法"打开对话框，而在对话框被隐藏时，将以"爆破法"隐藏。
评论已关闭