<!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='f:/study/jquery.js'></script>
<script>
$(function(){
$("#d").click(function(){
// $("div.dialog").slideDown(1000);
/// $("div.dialog").fadeIn(2000);
$("div.dialog").show(1000);
$("div.bg").show();
});
$("#c").click(function(){
// $("div.dialog").slideUp(1000);
// $("div.dialog").fadeOut(2000);
$("div.dialog").hide(1000);
$("div.bg").hide();
});
})
</script>
<style>
.bg {
background-color: #666;
display:none;
width: 100%;
height: 100%;
left:0;
top:0;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1;
position:fixed!important;
position:absolute;
}
.dialog{
display:none;
width:400px;
height:300px;
top:150px;
left:350px;
border:blue 1px solid;
background:yellow;
z-index:999;
position:absolute;
}
}
</style>
</head>
<body>
<center>
<input type='button' id='d' value='弹窗'>
<div style='height:400px;border:1px solid green; width:700px'>
正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文 正文
</div>
</center>
<div class='dialog' >
姓名:<input type='text'/>
<input type='button' id='c' value='关闭'>
</div>
<div class='bg' ></div>
</body>
</html>