导读:现在很多网页点击登陆按钮都会弹出一个对话框出来,一般情况下是不会显示出来的,只有在点击登陆时。其实这个一个层的操作。好,废话少说,现在我们来实现这个神奇的效果。
步骤:
一:首先使用css画出一个层出来
二:使用jQuery实现点击操作。
具体代码如下解释就不必啦。相信大家都是大牛。实在不懂得请“悟”吧。我一直在看别人的源码在悟!
<!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>
<style type="text/css">
body{padding:50px;margin:0;}
.box{border:solid 1px #666;300px;height:120px;display:none;}
.box h3{background:gray;font-size:15px;padding-left:10px;}
.box span{float:right;}
.content{padding-left:10px;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("a").click(function () {
$("#divFrame").css("display", "block");
});
$("#close").click(function () {
$("#divFrame").css("display","none");
});
});
</script>
</head>
<body>
<a href="#">登陆</a>
<div id="divFrame" class="box">
<h3><span id="close">关闭</span>基本信息</h3>
<div id="divContent" class="content">
用户名:<input type="text" /><br />
密 码:<input type="password" /><br />
<input type="button" value="提交" />
</div>
</div>
</body>
</html>