本文介绍了一个使用HTML和jQuery实现的遮罩层对话框示例。该对话框包括一个可选择信息类别的面板，通过按钮触发显示和隐藏。文章展示了完整的代码实现，包括HTML结构、样式设置及JavaScript交互。
下面是示例文件 demo.html 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>遮罩层</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Designer" content="cssrain" />
<meta name="Designer mail" content="cssrain@gmail.com" />
<meta name="Keywords" content="遮罩层" />
<meta name="Description" content="遮罩层" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.divbox.js"></script>
<style>
#divSCA
{
position: absolute;
width: 700px;
height: 500px;
font-size: 12px;
background: #fff;
border: 0px solid #000;
z-index: 10001;
display: none;
}
</style>
</head>
<body>
<input type="button" id="ttt" value="test" />
<div id="divSCA">
请选择信息类别<hr />
<input id="chkSelect" type="checkbox" />全选
<hr />
<div style="height: 132px; width: 500px; overflow: scroll;">
</div>
<div>
<input id="btnConfirmSCA" type="button" value="确定" />
<input id="btnCancelSCA" type="button" value="取消" />
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#ttt").click(function() { $('#divSCA').OpenDiv(); });
$("#btnConfirmSCA").click(function() { $("#divSCA").CloseDiv(); });
$("#btnCancelSCA").click(function() { $("#divSCA").CloseDiv(); });
});
</script>
</body>
</html>
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
