<!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>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#res").css("left",($(window).width()-$("#res").width())/2+"px");
$("#res").css("top",($(window).height()-$("#res").height())/2+"px");
$("#Text1").focus(function(){
$("#res").fadeIn();
})
$("#Button1").click(function(){
$("#Text1").val($("#result").html());
$("#res").fadeOut();
})
$("input[type=checkbox]").click(function(){
if($(this).attr("checked")==true)
$("#result").append($(this).val()+",");
else
$("#result").html($("#result").html().replace($(this).val(),""));
})
})
</script>
</head>
<body style="margin:0 auto; padding:0; text-align:center;">
<input id="Text1" type="text" style="height:20px;border:1px solid #ccc;" />
<div id="res" style="width:300px;height:300px;border:1px solid #ccc;z-index:10; background:yellow; FILTER:alpha(opacity=30);opacity=0.3;position:absolute; display:none;">
<input id="Button1" type="button" value="确定" /><span id="result"></span><br />
<input id="Checkbox1" type="checkbox" value="youku"/>youku
<input id="Checkbox2" type="checkbox" value="tudou" />tudou
<input id="Checkbox3" type="checkbox" value="baidu" />baidu
<input id="Checkbox4" type="checkbox" value="google" />google
</div>
</body>
</html>
