<script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    $(function() {

        $("#open").click(function() {

            openDialog(a1); //调用,直接写上DIV的ID即可

        });

    });

    var openDialog = function(o) {

        var dialog = new zzlDialog(o);

        dialog.open();

    }

    var zzlDialog = function(o) {

        this.init = function() {

            /* 对话框初始化 */

            var XBox = '\

                 <div id="mask"/>\

                <div id="wai">\

                </div>\

                <div id="nie">\

                    <table>\

                        <thead>\

                            <tr>\

                                <td>\

                                    阴影弹出框\

                                </td>\

                                <td>\

                                </td>\

                            </tr>\

                        </thead>\

                        <tbody>\

                            <tr>\

                                <td colspan="2">' + $(o).html() + '\

                                </td>\

                            </tr>\

                        </tbody>\

                    </table>\

                </div>\

                    ';

            $(document.body).append(XBox);

        };

        this.cssInit = function() {

            /* css初始化 */

            $("#wai").css({ "padding": "10px", "background": "#000", "filter": "Alpha(Opacity='50')", "position": "absolute" });

            $("#nie").css({ "position": "absolute", "z-index": "1000" });

            $("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": "collapse", "background": "#fff" });

            $("#nie>table>thead>tr").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" });

            $("#nie>table").find("td").css({ "padding": "5"});

            /* 内部主体定位 */

            $("#nie").css({ "top": "50px" });

            $("#nie").css({ "left": "50px" });

            /* 关闭按钮 */

            var $close = $("#nie>table>thead").find("td").next("td");

            $close.html("<span>关闭</span>");

            $close.css({ "text-align": "right", "padding-right": "5px" });

            $close.find("span").css({ "font-weight": "normal", "cursor": "hand" });

            $close.find("span").click(function() { new zzlDialog().closes(); });

            /* 外部阴影添加 ,及位置和大小由内部内容来控制 */

            $("#wai").css({ "width": ($("#nie>table").width() + 16) + "px", "height": ($("#nie>table").height() + 16) + "px" });

            $("#wai").css({ "top": $("#nie").position().top - 8 + "px", "left": $("#nie").position().left - 8 + "px", "z-index": $("#nie").css("z-index") });

         //   $("#wai").corner("5px"); //圆角

        };

        this.open = function() {

            this.init();

            this.cssInit();

            this.shadow();

        };

        this.shadow = function() {

            this.event_b_show();

            if (window.attachEvent) {

                window.attachEvent('onresize', this.event_b);

                window.attachEvent('onscroll', this.event_b);

            }

            else {

                window.addEventListener('resize', this.event_b, false);

                window.addEventListener('scroll', this.event_b, false);

            }

        };

        this.event_b = function() {

            var oShadow = $('#mask');

            if (oShadow.css("display") != "none") {

                if (this.event_b_show) {

                    this.event_b_show();

                }

            }

        };

        this.closes = function() {

            var oShadow = $('#mask');

            oShadow.css({ 'display': 'none' });

            $("#wai").remove();

            $("#nie").remove();

        };

        this.event_b_show = function() {

            var oShadow = $('#mask');

            oShadow.css({ 'position': 'absolute', 'display': '', 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' });

            var sClientWidth = parent ? parent.document.body.offsetWidth : document.body.offsetWidth;

            var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight;

            var sScrollTop = parent ? (parent.document.body.scrollTop + parent.document.documentElement.scrollTop) : (document.body.scrollTop + document.documentElement.scrollTop);

            oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px" });