html頁面中如何簡單製作彈出窗口層

原文：html頁面中如何簡單製作彈出窗口層

NanShan 即時通訊使用DIV彈出窗口來動態顯示內容的原理：首先採用CSS和HTML隱藏彈窗中的內容，然後利用JavaScript（本教程中是JQuery）來動態顯示它們。這種效果不僅能夠充分利用有限的版面空間，而且能夠提高用戶體驗；更重要的是，它並不影響SEO效果（因爲它實際存在於頁面中，只是初始爲不可見狀態）。

什麼是jQuery?
引用jQuery作者的話說，jQuery是一個快速簡潔的用於簡化HTML文檔的事件處理、動畫效果、AJax交互的快速穩定的JavaScript類庫。一句話就是，jQuery做好了所有底層的東西，我們只需要短短几行代碼，就可以完成原來可能需要幾十行JS代碼才能完成的功能。
第一步：我們將要做什麼？
一圖抵千言。讓我們看看這個DIV彈出窗口的效果截圖：
html頁面中彈出窗口層（jQuery）
看到了嗎？我們製作了一個非常簡單的網頁，裏面包含一個按鈕。點擊這個按鈕就可以激活這個漂亮的自定義彈出窗口了！拋棄瀏覽器自帶的生硬彈窗效果吧！
第二步：創建一個簡單的網頁
HTML
這裏，我們創建了2個html區塊。一個DIV名爲popupContact，這裏是彈出窗口中所包含的內容，初始狀態下它是不可見的（通過CSS實現）。另一個DIV區塊：backgroundPopup主要用做陪襯突出我們彈出窗口的效果，它初始狀態也是不可見的。所謂紅花還須綠葉襯，就是這個道理了。
        <div id="button"><input type="submit" value="點擊這裏查看效果" /></div>  
        <div id="popupContact">  
        <a id="popupContactClose">[X]</a>  
        <h1>標題</h1>  
         <input id="Text1" type="text" /><br />
         <input id="Text2" type="text" />       
   </div>  
   <div id="backgroundPopup"></div>  

CSS樣式
寫好了HTML代碼，我們需要給這個網頁添加一些CSS樣式了。其中最重要的是將popupContact 和 backgroundPopup 2個DIV區塊隱藏起來。因爲我們在打開頁面的時候並不希望見到他們，不是麼？它們的出現得益於用戶主動按下某個按鈕或鏈接，然後通過JavaScript來顯示它們。  
     <style type="text/css">
        #backgroundPopup
        {
            display: none;
            position: fixed;
            _position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background: #cccccc;
            border: 1px solid #cecece;
            z-index: 1;
        }
        #popupContact
        {
            display: none;
            position: fixed;
            _position: absolute;
            height: 245px;
            width: 300px;
            background:#223344;
            border: 2px solid #cecece;
            z-index: 2;
            padding: 12px;
            font-size: 13px;
        }   
        #popupContact h1
        {
            text-align: left;
            color: #6FA5FD;
            font-size: 22px;
            font-weight: 700;
            border-bottom: 1px dotted #D3D3D3;
            padding-bottom: 2px;
            margin-bottom: 20px;
        }
        #popupContactClose
        {
            font-size: 14px;
            line-height: 14px;
            right: 6px;
            top: 4px;
            position: absolute;
            color: #6fa5fd;
            font-weight: 700;
            display: block;
        }
    </style>
CSS代碼有些長，不過真正需要大家修改的是我上面做過註釋的區塊。都是一些非常常見的CSS屬性定義。如果有不懂的地方，請查找本站對應資源。
第四步：添加JavaScript代碼
此步是本教程的核心，也是實現DIV彈出窗口效果的核心步驟。jQuery允許我們僅通過少數幾個過程函數實現這個超酷的彈窗效果；所有這些函數都被我單獨打包成了一個JS文件――popup.js。
代碼流程解釋
我們首先需要創建一個名稱爲popupStatus的變量來控制彈出窗口的顯示與否。
//初始化：是否開啓DIV彈出窗口功能
//0 表示開啓; 1 表示不開啓;
var popupStatus = 0;
接下來是我們的主函數――Jquery加載彈窗函數：
//使用Jquery加載彈窗 
function loadPopup(){   
//僅在開啓標誌popupStatus爲0的情況下加載  
if(popupStatus==0){   
$("#backgroundPopup").css({   
"opacity": "0.7"  
});   
$("#backgroundPopup").fadeIn("slow");   
$("#popupContact").fadeIn("slow");   
popupStatus = 1;   
}   
}  
關閉/去除彈出窗口的函數：
//使用Jquery去除彈窗效果 
function disablePopup(){   
//僅在開啓標誌popupStatus爲1的情況下去除
if(popupStatus==1){   
$("#backgroundPopup").fadeOut("slow");   
$("#popupContact").fadeOut("slow");   
popupStatus = 0;   
}   
}  
我們還希望彈窗出現在屏幕的中央位置：
//將彈出窗口定位在屏幕的中央
function centerPopup(){   
//獲取系統變量
var windowWidth = document.documentElement.clientWidth;   
var windowHeight = document.documentElement.clientHeight;   
var popupHeight = $("#popupContact").height();   
var popupWidth = $("#popupContact").width();   
//居中設置   
$("#popupContact").css({   
"position": "absolute",   
"top": windowHeight/2-popupHeight/2,   
"left": windowWidth/2-popupWidth/2   
});   
//以下代碼僅在IE6下有效  
$("#backgroundPopup").css({   
"height": windowHeight   
});   
}
好了，有了這些基本函數，我們就可以通過jQuery對事件的觸發控制來組合這些基本函數以實現彈出DIV效果了。比如，當用戶觸發點擊按鈕事件時，我們依次執行居中函數（centerPopup）和窗口加載函數（loadPopup）即可。當用戶點擊彈出窗口右上方的"X"形關閉按鈕時，觸發一個事件執行：關閉彈窗函數。
需要注意的是，所有這些事件觸發過程都必須包含在以下代碼中：
$(document).ready(function(){   
//執行觸發事件的代碼區域  
});
當按下id爲#button的按鈕時觸發彈出窗口的事件：
//打開彈出窗口   
//按鈕點擊事件!
$("#button").click(function(){   
//調用函數居中窗口
centerPopup();   
//調用函數加載窗口
loadPopup();   
});
最後一步是關閉事件的觸發，這裏我們編寫了三種不同的方式來觸發關閉窗口事件：點擊彈窗右上角的"X"、點擊窗口周圍的背景和按下鍵盤上的ESC鍵。所以代碼如下：
//關閉彈出窗口   
//點擊"X"所觸發的事件
$("#popupContactClose").click(function(){   
disablePopup();   
});   
//點擊窗口以外背景所觸發的關閉窗口事件!
$("#backgroundPopup").click(function(){   
disablePopup();   
});   
//鍵盤按下ESC時關閉窗口!
$(document).keypress(function(e){   
if(e.keyCode==27 &amp;amp;amp;&amp;amp;amp; popupStatus==1){   
disablePopup();   
}   
});