jquery + Css 模式对话框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模式对话框示例</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$(".selTree").live("click",function () { $(".empTree,.bgDiv").show(); });
$(".close").live("click",function () {
$(this).parents(".shq,.box").hide();
$(".bgDiv").hide();
});
});
</script>
<style type="text/css" >
.bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
.shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
.boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
.boxHead div{margin-left:10px}
.shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
.shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
</style>
</head>
<body>
<input type="button" id="button" value="模式对话框" class="selTree" />
<!--选择查看 -->
<div class="bgDiv"></div>
<div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
<div class="boxHead">
<div class="shTitle">选择查看</div>
<div class="shClose close">×</div>
</div>
asdfasdfasdf
<input type="submit" name="button2" id="button2" value="确定" class="btn close"/>
<input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模式对话框示例</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$(".selTree").live("click",function () { $(".bgDiv,.empTree").show(); });
$(".close").live("click",function () {
$(this).parents(".shq,.box").hide();
$(".bgDiv").hide();
});
$(".bgDiv").height($(document).height());
$(".close").live("click",function () {
$(this).parents(".shq,.box").hide();
$(".bgDiv").hide();
});
});
</script>
<style type="text/css" >
.bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
.shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
.boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
.boxHead div{margin-left:10px}
.shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
.shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
</style>
</head>
<body>
<input type="button" id="button" value="模式对话框" class="selTree" />
<!--选择查看 -->
<div class="bgDiv"></div>
<div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
<div class="boxHead">
<div class="shTitle">选择查看</div>
<div class="shClose close">×</div>
</div>
asdfasdfasdf
<input type="submit" name="button2" id="button2" value="确定" class="btn close"/>
<input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
</div>
</body>
</html>
