当前位置:编程学习 > JS >>

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.zzzyk.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>

补充:网页制作,jquery
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,