JQuery

1个成员

jquery弹出层div+css实用代码

发表于 2017-01-30 3287 次查看
jquery弹出层div+css实用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.php100.com/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 弹出公告</title>
<script type="text/javascript教程" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style>
*{margin:0;padding:0;font-size:12px;}
li{float:left;width:100px;border:1px solid #ccc;list-style:none;text-align:center;}
h3{margin:20px auto;text-align:center;}
input{width:120px;height:30px;cursor:pointer;}
#notice{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:10px;top:10px;display:none;}
</style>
<script>
$(function(){
$('#open').click(function(){
$('#notice').slideDown();
$('#texta').val('豪情').select();
});
$('#closed').click(function(){
$('#notice').slideUp();
});
});
</script></head>
<body>
<h3>
<input id="open" type="button" value="弹出公告" />
 
<input id="closed" type="button" value="关闭公告" />
</h3>
<div id="notice">
<textarea name="" id="texta" cols="30" rows="10">
</div>
</body>
</html>

发表回复
你还没有登录,请先登录注册