lhgdialog彈出視窗架構（最終完善版）.

本篇文章來源于 cssrain.cn 原文連結：http://www.cssrain.cn/article.asp?id=1275

<a href="http://www.cssrain.cn/attachments/month_0902/5200928115013.jpg"></a>

 一、元件簡介

lhgdialog DIV彈出視窗架構是一個簡潔、高效、美觀、易用的多功能彈出視窗元件。

它的主要特點有：

代碼簡潔：整個元件所有代碼總共18K，如果不算上圖檔和CSS樣式表檔案，總共大小才12K不到。（這是在代碼未壓縮情況下）

程式運作效率高：彈出視窗在打開和拖動時非常流暢，在同等測試條件下，CUP的占有率在30%左右，最高不超過40%。而其它彈出 視窗（比如：JQuery，ExtJs，Mootools，還有其它彈出視窗等）CUP的占有率都在50%左右，最高60%以上。

視窗樣式更改簡便：元件采用的是QQ2009視窗的界面，雖說不上很漂亮，但也不算難看（本個界面設計能力較差:-)...）如果你 想更改視窗樣式也很容易，元件采用的是靜态模闆來設計的視窗的樣式，你隻要更改lhgdialog.html裡body 之間的HTML代碼，再相應改下lhgdialog.css樣式表檔案即可。而且元件樣式不受調用頁面限制，可随意更改 你想要的樣式。

可擴充性強，複用性高：元件提供了基本常用的功能，在此基礎上可根據個人需要增加相應功能，隻需要增加少量代碼即可開發 出各種彈出視窗。而且視窗的内容頁和架構也是互相獨立的，設計好架構後你隻要更改内容頁即可。

元件調用靈活：在同一頁面可以調用任意多個彈出視窗，而且最突出的是在同一頁面可以彈出不帶遮罩和帶遮罩的視窗混用。

支援所有主流浏覽器：IE6+，Firefox2.0+，Chrome(谷歌浏覽器)，Opera9.5+，Safari3.0+等。（題外音：個人覺得Opera最好用，打開 網頁的速度是我上面列出所有浏覽器中最快的，不是指打開我的元件，而是打開任何網頁個人感覺速度很 快，而且人性化設計也是比較突出的。不是做廣告噢:-)...）

本人編寫元件一直争取能在滿足使用的情況下做到代碼最簡潔，執行效率高，是以有些不太實用的功能就沒有加上，如朋友們需要 可自行加上，或與我共同探讨也可。我的QQ：463214570 ，blog：http://www.cnblogs.com/lhgstudio 

二、元件結構

lhgdialog.js：元件主調用檔案，在調用的地方隻需要該檔案。

lhgdialog.html：元件視窗靜态模闆檔案，控制視窗樣式及對視窗的操作。

lhgdialog.css：元件視窗樣式表檔案。

_content.html：元件視窗内容頁示例檔案，此頁面由使用者自己随意定制。

_samples.html：調用元件示例頁，即此頁面。

images：視窗所有圖檔檔案夾

三、調用方法及參數說明

在需要調用的頁面引入lhgdialog.js，例如：&lt;script type="text/javascript" src="lhgdialog.js"&gt;&lt;/script&gt;

然後在要調用的位置上引發的事件中加入調用代碼，例如：&lt;input type="button" onclick="lhgdialog.opendlg(...);"/&gt; 或者在onclick=這寫個自己的函數，如：open();然後再在JS的部位裡加個function open()函數，再在裡面調用lhgdialog.opendlg

參數說明：lhgdialog.opendlg是主調函數，他共有7個參數，詳細如下：

lhgdialog.opendlg( 視窗标題，内容頁，視窗寬，視窗高，是否顯示遮罩層，彈出視窗距頂部距離，彈出視窗距左邊距離 ）

例如：lhgdialog.opendlg( '登入視窗', 'login.html', 400, 300 ); 後面的參數如果不用可以省略

  lhgdialog.opendlg( '', 'ok.html', 600, 480, true, 100, 200 ); 如果前面有不填的參數就用''就可以了，但不可省略。

四、下載下傳：

http://files.cnblogs.com/lhgstudio/lhgdialog.rar