每次做弹窗都伤脑筋,终于发现了一个大同小异的模板
css样式差不多就是这样,至于margin-left和margin-top的px就是div的width和height/2了
这就是绝对居中的样式,z-index自己设置
#div1 {
position:absolute;
top: 50%;
left: 50%;
margin-left:-250px;
margin-top:-150px;
width:500px;
height:300px;
z-index:1;
border:solid #7A7A7A 4px;
}
网页就是这个样子,也是从网上copy的,随手修改
<span style="cursor:pointer" id="span1">点我弹出div</span>
<div id="div1">
<div align="right" style="background-color:#CDCDCD;">
<span id="span2" style="cursor:pointer">关闭</span>
</div>
<p><p>
<form>
姓名:<input type="text"/><p />
年龄:<input type="text"/><p />
<input type="submit" value="submit"/><br />
</form>
</div>
jquery或者js 随便写大概就是这样
$(function(){
$("#div1").hide(); //先让div隐藏
$("#span1").click(function(){
$("#div1").fadeIn("slow");//淡入淡出效果 显示div
});
$("#span2").click(function(){
$("#div1").fadeOut("slow");//淡入淡出效果 隐藏div
})
});
以上就可以弹出绝对中div,希望可以帮到大家,当然有了居中 就可以想去哪里就去哪里