弹窗

style

<style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #tc_zhezhao {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.3;
            filter: alpha(opacity=30);
            -moz-opacity: 0.3;
            display: none;
            z-index: 100000;
        }

        #tc_zt {
            position: fixed;
            top: -500px;
            left: 35%;
            width: 30%;
            height: 300px;
            background-color: white;
            z-index: 100001;
            border: 1px dotted black;
        }

        #tc_zt_bt {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: #c0c0c0;
        }

        #tc_zt_nr {
            position: absolute;
            left: 10%;
            top: 70px;
            width: 80%;
            height: 160px;
            text-align: center;
            word-wrap: break-word;
            background-color: aqua;
        }

        #tc_zt_an {
            position: absolute;
            left: 150px;
            top: 250px;
            width: 100px;
            height: 35px;
            background-color: black;
            border: 2px solid black;
            color: white;
            text-align: center;
            line-height: 35px;
            font-size: 30px;
        }
    </style>

　　js

 <script src="JS/jquery-1.7.2.min.js"></script>
    <script src="JS/jquery.color.js"></script>
 <script type="text/javascript">
        $(document).ready(function () {
            $("#tc").click(function () {
                ////取得浏览器的高度
                //var llhei = window.innerHeight;
                //var hei = $("body").outerHeight();

                ////alert(hei);
                ////alert(llhei);

                ////如果body的高度小于浏览器高度，就把浏览器高度赋给hei
                //if (hei < llhei) {
                //    hei = llhei;
                //}

                $("#tc_zhezhao").css("display","inline-block");
   
                $("#tc_zt").animate({ top: "180px" }, 100).animate({ top: "150px" }, 100);
            });
            $("#tc_zt_an").hover(function () {
                $(this).css("backgroundColor", "white");
                $(this).css("color", "black");
            }, function () {
                $(this).css("backgroundColor", "black");
                $(this).css("color", "white");
            });
            $("#tc_zt_an").click(function () {
                $("#tc_zt").animate({ top: "180px" }, 100).animate({ top: "-500px" }, 100, function () {
                    $("#tc_zhezhao").css("display", "none");
                });
            });

        });
    </script>

　　body

<input type="button" value="弹窗" id="tc" /><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="tc_zhezhao"></div>
    <div id="tc_zt">
        <div id="tc_zt_bt"></div>
        <div id="tc_zt_nr"></div>
        <div id="tc_zt_an">确  定</div>
    </div>