[置顶] 分享一个JQuery制作的放大效果的popup对话框（未添加任何jquery plugin）

多的不说了，直奔主题，分享一个放大效果的popup dialog，项目中可以根据自己的需求来写css，我打算复用到metro风格的site上去。

看起来动画效果还是比较cool的，如果加上了处理后的效果更佳：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style>
body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }

ul li { background:#fff; margin:5px; 100px; height:100px; float:left; }

#transition {
    background:transparent;
    display:none;
    position:absolute; top:50%; left:50%; z-index:50;
    z-index: 10001;
}
#content {
    background:#fff;
    border:1px solid #666;
    margin:-50px 0 0 -50px;
    100px; height:100px;
    z-index: 10001;
}

#mask{
    position: absolute;
    top: 0;
    left: 0;
     100%;
    height: 100%;
    background-color: #000000;
    display: none;
    z-index: 10000;
}

.close
{
    30px;
    height:20px;

    background-color:Red;
    cursor:pointer;
    display:none;
}

.closeShow
{
    30px;
    height:20px;
    margin-left:50px;
    margin-top:-100px;
    background-color:Red;
    cursor:pointer;
}
    </style>

    <script type="text/javascript">

        $(document).ready(function () {
            $('ul li').click(function (e) {
                $("#mask").fadeTo(500, 0.25);
                $("#content").html("<div>Loading....</div>");
                var $t = $('#transition'),
                    to = $(this).offset();
                var height = $(document).height();
                var width = $(document).width();

                $('#content').css({  100, height: 100 });
                $t.css({
                    top: to.top + 50,
                    left: to.left + 50,
                    display: 'block'
                }).animate({
                    top: height / 2,
                    left: width / 2
                }, 600, function () {
                    $(this).animate({
                        top: 125,
                        left: 175
                    }, 600);
                    $('#content').animate({
                         width * 0.8,
                        height: height * 0.8
                    }, 600, function () {
                        // open dialog here
                        $("#content").html("<div>Hello, please put content here.</div>");
                    });
                });
            });

            $('#transition').click(function (e) {
                $("#transition").hide();
                $("#mask").hide();
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

<ul>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
</ul>
<div id='mask'></div>
<div id="transition"><div id="content">Loading....</div></div>


    </form>
</body>
</html>

加入了mask效果，如果不需要可以直接删掉。

效果截图：

http://my.csdn.net/my/album/detail/1640243

http://my.csdn.net/my/album/detail/1640244

http://my.csdn.net/my/album/detail/1640244#1640245