2009.12.28——jQuery ui之遮罩层

原创于 2009-12-28 20:36:58 发布 · 97 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一个使用jQuery UI实现的遮罩层效果案例。通过简单的HTML结构与jQuery UI组件结合，可以轻松创建具备遮罩功能的弹窗对话框。案例中详细展示了所需的HTML结构、引用的CSS和JavaScript文件及必要的jQuery代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2009.12.28——jQuery ui之遮罩层

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>jQuery UI Tabs - Default functionality</title>
	<link type="text/css" href="jquery-ui-1.7.2.custom/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.2.custom/development-bundle/ui/jquery-ui-1.7.2.custom.js"></script>
	<script type="text/javascript">
	$(function() {
		$("#dialog").hide()
		$("#btn").click(function(){$("#dialog").dialog({
			bgiframe: true,
			height: 140,
			modal: true//这个就是遮罩效果
		});})
	});

	</script>
</head>
<body>
<div class="demo">
<div>
	<input type="button" id="btn" value="点我啊">
<div>
<div id="dialog" title="嘿嘿" style="">
	<p>你个废物</p>
</div><!-- End demo-description -->


</body>
</html>