您的位置：首页 > Web前端 > JQuery

jQuery实现一个弹出登陆层的效果

2012-12-19 21:48 239 查看

导读：现在很多网页点击登陆按钮都会弹出一个对话框出来，一般情况下是不会显示出来的，只有在点击登陆时。其实这个一个层的操作。好，废话少说，现在我们来实现这个神奇的效果。

步骤：

一：首先使用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;width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航