层显示

xuhongqin

浏览: 61405 次
性别:
来自: 北京

最近访客更多访客>>

youngmk

junquinchen

zengfa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Google JavaScript jQuery CSS XHTML

<!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>