彈層，iframe頁面

前臺頁面： 

<img src="chb/老玩家 好禮送.jpg" border="0" width="202" height="254" onclick="DL()" style="cursor: pointer" />

JS：

        function DL() {
            dl = new Dialog({ type: 'iframe', value: 'chb/NewService.aspx' }, { id: 'Dialog1', showTitle: false });
            dl.show();
        }
        function DLClose() {
            dl.close();
        }

dialog.css ：

.dialog iframe
{
    height: 100%;
    width: 100%;
}


.dialog img
{
    height: 100%;
    width: 100%;
}

dialog.js ：

/**
 * Dialog
 *
 * @author    caixw <http://www.caixw.com>
 * @copyright Copyright (C) 2010, http://www.caixw.com
 * @license   FreeBSD license
 */


/**
 * jQuery的Dialog插件。
 *
 * @param object content
 * @param object options 選項。
 * @return 
 */
function Dialog(content, options)
{
    var defaults = { // 默認值。 
        title:'標題',       // 標題文本，若不想顯示title請經過CSS設置其display爲none 
        showTitle:true,     // 是否顯示標題欄。
        closeText:'[關閉]', // 關閉按鈕文字，若不想顯示關閉按鈕請經過CSS設置其display爲none 
        draggable:true,     // 是否移動 
        modal:true,         // 是不是模態對話框 
        center:true,        // 是否居中。 
        fixed:true,         // 是否跟隨頁面滾動。
        time:0,             // 自動關閉時間，爲0表示不會自動關閉。 
        id:false            // 對話框的id，若爲false，則由系統自動產生一個惟一id。 
    };
    var options = $.extend(defaults, options);
    options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 惟一ID
    var overlayId = options.id + '-overlay'; // 遮罩層ID
    var timeId = null;  // 自動關閉計時器 
    var isShow = false;
    var isIe = $.browser.msie;
    var isIe6 = $.browser.msie && ('6.0' == $.browser.version);

    /* 對話框的佈局及標題內容。*/
    var barHtml = !options.showTitle ? '' :
        '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
    var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
    $('body').append(dialog);


    /**
     * 重置對話框的位置。
     *
     * 主要是在須要居中的時候，每次加載完內容，都要從新定位
     *
     * @return void
     */
    var resetPos = function()
    {
        /* 是否須要居中定位，必需在已經知道了dialog元素大小的狀況下，才能正確居中，也就是要先設置dialog的內容。 */
        if(options.center)
        {
            var left = ($(window).width() - dialog.width()) / 2;
            var top = ($(window).height() - dialog.height()) / 2;
            if(!isIe6 && options.fixed)
            {   dialog.css({top:top,left:left});   }
            else
            {   dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});   }
        }
    }

    /**
     * 初始化位置及一些事件函數。
     *
     * 其中的this表示Dialog對象而不是init函數。
     */
    var init = function()
    {
        /* 是否須要初始化背景遮罩層 */
        if(options.modal)
        {
            $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
            $('#' + overlayId).css({'left':0, 'top':0,
                    /*'width':$(document).width(),*/
                    'width':'100%',
                    /* 'height':'100%',*/
                    'height':$(document).height(),
                    'z-index':++Dialog.__zindex,
                    'position':'absolute'})
                .hide();
        }

        dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});

        /*  IE6 兼容fixed代碼 */
        if(isIe6 && options.fixed)
        {
            dialog.css('position','absolute');
            resetPos();
            var top = parseInt(dialog.css('top')) - $(document).scrollTop();
            var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
            $(window).scroll(function(){
                dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
            });
        }

        /* 如下代碼處理框體是否能夠移動 */
        var mouse={x:0,y:0};
        function moveDialog(event)
        {
            var e = window.event || event;
            var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
            var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
            dialog.css({top:top,left:left});
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        };
        dialog.find('.bar').mousedown(function(event){
            if(!options.draggable){  return; }

            var e = window.event || event;
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            $(document).bind('mousemove',moveDialog);
        });
        $(document).mouseup(function(event){
            $(document).unbind('mousemove', moveDialog);
        });

        /* 綁定一些相關事件。 */
        dialog.find('.close').bind('click', this.close);
        dialog.bind('mousedown', function(){  dialog.css('z-index', ++Dialog.__zindex); });

        // 自動關閉 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }
    }


    /**
     * 設置對話框的內容。 
     *
     * @param string c 能夠是HTML文本。
     * @return void
     */
    this.setContent = function(c)
    {
        var div = dialog.find('.content');
        if('object' == typeof(c))
        {
            switch(c.type.toLowerCase())
            {
            case 'id': // 將ID的內容複製過來，原來的還在。
                div.html($('#' + c.value).html());
                break;
            case 'img':
                div.html('加載中...');
                $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
                    .attr('src',c.value);
                break;
            case 'url':
                div.html('加載中...');
                $.ajax({url:c.value,
                        success:function(html){div.html(html);resetPos();},
                        error:function(xml,textStatus,error){div.html('出錯啦')}
                });
                break;
            case 'iframe':
                div.append($('<iframe border="0" marginwidth="0" scrolling="no"    frameborder="no"  allowtransparency="true" marginheight="0" src="' + c.value + '" />'));
                break;
            case 'text':
            default:
                div.html(c.value);
                break;
            }
        }
        else
        {   div.html(c); }
    }

    /**
     * 顯示對話框
     */
    this.show = function()
    {
        if(undefined != options.beforeShow && !options.beforeShow())
        {   return;  }

        /**
         * 得到某一元素的透明度。IE從濾境中得到。
         *
         * @return float
         */
        var getOpacity = function(id)
        {
            if(!isIe)
            {   return $('#' + id).css('opacity');    }

            var el = document.getElementById(id);
            return (undefined != el
                    && undefined != el.filters
                    && undefined != el.filters.alpha
                    && undefined != el.filters.alpha.opacity)
                ? el.filters.alpha.opacity / 100 : 1;
        }
        /* 是否顯示背景遮罩層 */
        if(options.modal)
        {   $('#' + overlayId).fadeTo('slow', getOpacity(overlayId));   }
        dialog.fadeTo('slow', getOpacity(options.id), function(){
            if(undefined != options.afterShow){   options.afterShow(); }
            isShow = true;
        });
        // 自動關閉 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }

        resetPos();
    }


    /**
     * 隱藏對話框。但並不取消窗口內容。
     */
    this.hide = function()
    {
        if(!isShow){ return; }

        if(undefined != options.beforeHide && !options.beforeHide())
        {   return;  }

        dialog.fadeOut('slow',function(){
            if(undefined != options.afterHide){   options.afterHide(); }
        });
        if(options.modal)
        {   $('#' + overlayId).fadeOut('slow');   }

        isShow = false;
    }

    /**
     * 關閉對話框 
     *
     * @return void
     */
    this.close = function()
    {
        if(undefined != options.beforeClose && !options.beforeClose())
        {   return;  }

        dialog.fadeOut('slow', function(){
            $(this).remove();
            isShow = false;
            if(undefined != options.afterClose){   options.afterClose(); }
        });
        if(options.modal)
        {   $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
        clearTimeout(timeId);
    }

    

    init.call(this);
    this.setContent(content);
    
    Dialog.__count++;
    Dialog.__zindex++;
}
Dialog.__zindex = 500;
Dialog.__count = 1;
Dialog.version = '1.0 beta';

function dialog(content, options)
{
    var dlg = new Dialog(content, options);
    dlg.show();
    return dlg;
}

彈層上的關閉按鈕 ：

    <img src="kl1.png" onclick="CC()" border="0" style="cursor: pointer" />

JS ：

    <script type="text/javascript" language="javascript">
         function CC() {
             parent.window.DLClose();
         }

         function gb() {
             alert("您已經登記成功！");
             CC();
         }

         function dgg() {
             alert("您已經登記過了！");
             CC();
         }
    </script>

後臺代碼 ：

 Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "<script> gb();</script>");