使用jquery实现点击按钮弹出对话框
html:
<input type="button" id="btn02" value="修改密码" >
<div id="div">
<p class="exit">x</p><br>
<div>
<form action="">
原密码<input type="password" name="init_passwd"><br>
新密码<input type="password" name="new_passwd"><br>
确认密码<input type="password" name="again_new_passwd">
</form>
</div>
</div>
css样式:
<style type="text/css">
#div{
margin:0 auto;
background: #eef;
width:200px;
height:500px;
display:none;
}
p{
background:#999;
width:20px;
height:20px;
cursor:pointer;
text-align:center;
line-height:20px;
border-radius:50%;
margin-left:180px;
}
</style>
jquery语句:
<script type="text/javascript">
$(function(){
$("#btn02").click(function(){
$("#div").show(200);
});
$(".exit").click(function(){
$("#div").hide(200,"linear");
});
$(".exit").mouseover(function(){
$(this).css("background","blue");
});
$("p").mouseout(function(){
$(this).css("background","#999");
});
});
</script>
点击修改密码,弹出修改密码对话框,点击对话框右上角的叉,会关闭.