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

来源：互联网发布：淘宝被骗款怎么办编辑：程序博客网时间：2024/05/21 14:53

多的不说了，直奔主题，分享一个放大效果的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; width: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;    width:100px; height:100px;    z-index: 10001;}#mask{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: #000000;    display: none;    z-index: 10000;}.close{    width:30px;    height:20px;    background-color:Red;    cursor:pointer;    display:none;}.closeShow{    width: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({ width: 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: 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效果，如果不需要可以直接删掉。