仿 Windows 關機效果：封裝 Lightbox 類別實作彈出視窗元件

初始化階段為每個可高亮顯示的連結建立 Lightbox 物件。核心類別實作如下 (Prototype.js 風格)：

var Lightbox = Class.create();
Lightbox.prototype = {
    yPos: 0,
    xPos: 0,

    // 建構子：ctrl 為觸發元素
    initialize: function(ctrl) {
        this.content = ctrl.href;                    // 目標內容 URL
        Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
        ctrl.onclick = function(){ return false; };  // 取消預設連結行為
    },

    // 點擊觸發
    activate: function() {
        if (browser == 'Internet Explorer') {        // IE 專屬處理
            this.getScroll();                        // 記錄捲軸位置
            this.prepareIE('100%', 'hidden');        // 鎖定頁面捲動
            this.setScroll(0, 0);
            this.hideSelects('hidden');              // 隱藏所有 <select> (IE6 遮罩問題)
        }
        this.displayLightbox("block");               // 顯示遮罩與內容層
    },

    // IE 頁面鎖定
    prepareIE: function(height, overflow) {
        var bod = document.getElementsByTagName('body')[0];
        bod.style.height = height; bod.style.overflow = overflow;
        var htm = document.getElementsByTagName('html')[0];
        htm.style.height = height; htm.style.overflow = overflow;
    },

    // 隱藏/顯示 select 元素
    hideSelects: function(visibility) {
        var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++) selects[i].style.visibility = visibility;
    },

    // 取得捲軸位置
    getScroll: function() {
        if (self.pageYOffset) this.yPos = self.pageYOffset;
        else if (document.documentElement && document.documentElement.scrollTop)
            this.yPos = document.documentElement.scrollTop;
        else if (document.body) this.yPos = document.body.scrollTop;
    },

    // 設定捲軸位置
    setScroll: function(x, y) { window.scrollTo(x, y); },

    // 顯示/隱藏 Lightbox
    displayLightbox: function(display) {
        $('overlay').style.display = display;        // 遮罩層
        $('lightbox').style.display = display;       // 內容層
        if (display != 'none') this.loadInfo();      // 載入內容
    },

    // AJAX 載入遠端內容
    loadInfo: function() {
        var myAjax = new Ajax.Request(this.content, {
            method: 'get',
            parameters: '',
            onComplete: this.processInfo.bindAsEventListener(this)
        });
    },

    // 處理回應並綁定事件
    processInfo: function(response) {
        var result = response.responseText;
        var info = "
" + result + "
";
        new Insertion.Before($('lbLoadMessage'), info); // 插入載入提示前
        $('lightbox').className = "done";              // 標記載入完成
        this.actions();                                // 掃描新連結並綁定事件
        var ctrl = $('lightbox');
        Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
        ctrl.onclick = function(){ return false; };
    },

    // 關閉並重置
    reset: function() {
        $('overlay').style.display = "none";
        $('lbContent').innerHTML = "";
        $('lightbox').style.display = "none";
    },

    // 掃描 class="lbAction" 元素，依 rel 屬性綁定對應方法
    actions: function() {
        var lbActions = document.getElementsByClassName('lbAction');
        for (var i = 0; i < lbActions.length; i++) {
            Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
            lbActions[i].onclick = function(){ return false; };
        }
    }
};

關鍵設計重點

• Prototype.js 風格：Class.create()、bindAsEventListener()、Ajax.Request、Insertion.Before、$() 選取器。
• IE 相容性：捲軸鎖定、<select> 隱藏 (解決 IE6 遮罩穿透)、捲軸位置保存/還原。
• 非同步載入：點擊後 AJAX 取得內容，插入 #lightbox，支援動態內容。
• 事件委派擴充：actions() 掃描 .lbAction，依 rel 屬性動態綁定實例方法，實現內容區塊內的互動邏輯 (如分頁、表單送出)。
• 狀態管理：className="done" 標記載入完成，CSS 可據此切換載入動畫/內容顯示。

提示：程式碼註解詳細，建議配合 Prototype.js 文檔閱讀。