2017-6-4 jQuery 实战弹窗制作

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        #tc 
        {position:fixed;
            width:400px;
           
           
            left:50%;
            margin-left:-200px;
            top:-500px;
            border:1px solid navy;
            box-shadow:0 0 10px #808080;
            border-radius:10px 11px;
          
            z-index:11;
        }
        #tc-top 
        {
            width:100%;
            height:30px;
            background-color:navy;
            color:white;
            font-size:18px;
            font-weight:bold;
            text-align:center;
            line-height:30px;
             border-radius:10px 11px;
        }
        #tc-bottom 
        {
            position:relative;
            width:100%;
            height:40px;
           
        }
        #tc-btn1
         {
            position:absolute;
            width:100px;
            height:30px;
            top:5px;
            background-color:navy;
            color:white;
            text-align:center;
            line-height:30px;
            cursor:pointer;
            left:50%;
            margin-left:-50px;
        }
            #tc-btn1:hover
             {
                background-color:red;
                color:green;
            }
        #tc-main
         {
            padding:20px;
            text-align:center;
            background-color:white;
        }

        #tc-zz 
        {
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background-color:black;
            opacity:0.3;
            display:none;
            z-index:10;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input  type="button" value="弹出" id="btn1"/>
    <div id="tc">
    <div id="tc-top">这里是标题</div>
          <div id="tc-main">这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！</div>
          <div id="tc-bottom">
              <div id="tc-btn1">确定</div>
          </div>
    </div>

        <div id="tc-zz"></div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        myalert('我是小倩','小倩：你好！！');
    });
    function myalert(t, c) {

        $("#tc-top").text(t);
        $("#tc-main").html(c);
        $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 300);
        $("#tc-zz").css("display", "block");
    }

    $("#tc-btn1").click(function () {
        $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz").css("display", "none"); });
      
    });

</script>
posted on 2017-06-05 07:05 口袋里的SKY 阅读(113) 评论(0) 编辑收藏举报