个人自制遮罩效果，适合小图片点击查看大图的功能

HTML：

<div class="parent">
        姓名：<input id="Text1" type="text" />
        <div class="mask">
            <div class="children">
                <div class="close">
                    <a id="ico_close" close"" href="javascript:void(0)"><img src="image/ico/icon-close.png" /></a>
                </div>
                asdsadsadsaasdsaadadasasd
            </div>
        </div>
    </div>

CSS

 .parent {
            width:1890px;
            height:920px;
            background:#3d7a12;
            position:relative;
        }
        .children {
            border:3px #fff solid;
            width:200px;
            height:150px;
            background:#6cbaa2; 
            position:absolute; 
            top: 0; left: 0; bottom: 0; right: 0; 
            margin:auto;

        }
        .close a img{
            float:right;
            text-decoration:none;
        }
        .close a:hover img{
            background:#fff;
        }

        .mask{
            width:200px;
            height:150px;
            background:rgba(2, 2 ,1, 0.2);
            margin:auto;
            top: 0; left: 0; bottom: 0; right: 0; 
            position: absolute;  
        }

JQuery(需要引入jquery文件)：

$(function () {
        $('.children').click(function () {
            if ($('.children').width() == 500 && $('.children').height()==500) {
                return false;
            }
            $('.children').animate({
                width: '500px',
                height: '500px',
                position: 'relative',
                top: '0', 
                left: '0',
                bottom: '0', 
                right: '0' ,
                margin:'auto'
            }, 500);
            $('.mask').animate({
                width: '1890px',
                height: '920px'
            },500);
            return false;
        });
        $('#ico_close').click(function () {
            if ($('.children').width() == 200 && $('.children').height() == 150) {
                return false;
            }
            $('.children').animate({
                width: '200px',
                height: '150px',
                position: 'absolute',
                top: '0',
                left: '0',
                bottom: '0',
                right: '0',
                margin: 'auto'
            }, 500);
            $('.mask').animate({
                width: '200px',
                height: '150px'
            }, 500);
            return false;
        })

        //$('.children').click(function () {
        //    $(this).animate({
        //        width: '500px',
        //        height: '500px'
        //    }, 500);
        //    $('.mask').animate({
        //        width: '1890px',
        //        height: '920px'
        //    }, 500);
        //});
        //$('.close > a').click(function () {
        //    $(this).parents(".children").animate({
        //        width: '200px',
        //        height: '150px'
        //    }, 500);
        //    $('.mask').animate({
        //        width: '200px',
        //        height: '150px'
        //    }, 500);
        //    return false;
        //})

    })