今天要寫的是關于彈出窗口的，各位肯定看到這樣的效果：點擊登錄的時候，彈出一個背景為黑色的窗口，其實要說做這樣的效果也不難，但是對于像我這樣js沒認真學，又要實現效果的朋友來說，是有點難的，今天弄了一天，這個效果，勉強是實現了這樣的效果，但是不是很完美，當然了，我是不可能現在自己寫出來的，只能用插件了js實現彈出選擇路徑框，在網上找 了很多，問別人也問了很久，弄出來兩個，我覺得還是挺好用的，只是有些效果還不能直接實現出來，好了現在來看看吧：
在看之前我先說一下我要做的效果：我的頁面中有許多從數據庫查詢出來的數據，每個數據后面都有一個查看按鈕，點擊查看按鈕，通過js的將值傳給，再從數據庫中查出內容顯示出來，顯示彈出窗口中，我要的效果就是這樣。
第一個插件：
使用方法：
一個基于的彈出層。支持拖拽，支持內容為文字，圖片，URL等!至于兼容性。在IE6下，彈出對像無法絕對固定。其他應該沒啥大問題；
最新更新：(2010-08-12)：修正IE6下不能遮住下拉菜單的BUG，增加拖動時半透明效果。
首先當然是導入它的cs文件和css文件了，分別為.js和.css
之后導入：
就可以直接用了
應用演示 彈出文本信息提示：
我是下拉菜單 ("提示","text:提示信息內容","250","150","true","","true","msg") 彈出頁面中的某個ID的html：
("標題","id:","300","200","true","","true","id") 彈出圖片：
("圖片","img:圖片路徑","250","150","true","","true","img") get加載一個.html文件（也可以是.php/.asp?id=4之類的）：
("標題","url:get?test.html","250","150","true","","true","text"); 加載一個頁面到框架顯示：
("標題",":","900","580","true","","true",""); 彈出一個不能拖動且沒有遮罩背景的文本信息層：
("提示","text:提示信息內容","250","150","false","","false","msg") 彈出一個不能拖動，三秒鐘自動關閉的層：
("提示","text:提示信息內容","250","150","false","3000","true","msg") 參數說明 順序參數功能備注
彈出層的標題
必填，純文本
彈出層的內容
text
文本內容
id
頁面里某id的子標簽
img
圖片
url
get或post某一頁面里的html，該頁面要求只包含body的子標簽
目標地址在框架顯示
彈出層的寬
必填，比如“200”。（不需要帶px）
彈出層的高
同 width
5drag
是否可拖動
必填，可選參數（true,false）
6time
自動消失時間
可不填，默認不自動關閉；參數可為空("")
是否顯示遮罩層
可不填，默認不顯示（此項如填了，它前面的time也必須要填）
彈出層附加樣式名
可不填
像這種彈出透明背景層效果很常見了，除部分區域可以操作外其他區域不能操作，目前有提供插件js實現彈出選擇路徑框，完全可以實現此種效果。
查看本頁源代碼可獲取所有所需的代碼。
這里不能顯示，我說下我使用的方法：
這是查看鏈接
(a){
("標題","url:get?/?"+a,"250","150","true","","true","text");
}
就這樣就行了，這個插件我覺得是相當強大的，可惜我這個是通過才顯示的頁面，不是直接顯示頁面，所以有點問題，在IE和360里面彈出以后背景是黑色的，在中可以正常使用，這是唯一遺憾的地方，其他方法相當的好用
注意使用的時候文件目錄是這樣的
--css
--.css
--js
--.js
--.js
第二個插件：
我這個項目最后用的就是這個，但是很遺憾還是有些滿意的地方，下面再講：
前面可以通過 這個 插件實現彈出框效果，但是使用 需要事先導入 JS 文件，所以如果僅僅需要彈出框效果的話，有點過于臃腫，所以這個時候我推薦你使用， 這個輕量級的 腳本。
是一個輕量級并且獨立的模態窗口腳本，該腳本只有 3.5KB，不包括任何內置的幻燈片功能，但是可以顯示任何的 AJAX 和 HTML 內容，還支持圖片，并且能夠自動隱藏，可以通過簡單的 CSS 來定制樣式的效果。 已經在 2/3, IE 6/7/8, Opera, 和 中測試過。使用 非常簡單，通過一下代碼即可：
1
TINY.box .show('.html',1,300,150,1,3)
它一共有6個參數，第一個是要顯示的 AJAX 或 HTML 內容。第二個是設置是否為 AJAX。第三個是寬度，0 為自動。第四個是高度，0 為自動。第五個是是否設置隱藏，第六個則是設置是否自動隱藏的時間。
這是網上的一個介紹，看起來相當的簡單，用起來也相當的簡單：
(a){
TINY.box.show("/?id="+a,1,300,150,1,3);
}
這是我最后用的，但是有一個問題，就是沒有關閉按鈕，再一位網友的指導了，在彈出窗口的里面加了關閉鏈接：
${.}
不過很遺憾，在IE中，這個關閉鏈接有時候顯示不出來，寫這的時候，我還不知道怎么解決，不過項目時間有限，只能將就了，以后有時間再來研究一下。
注意使用的時候文件分布是這樣的：
---css
--
---.gif
---rhino.jpg
--js
--.js
網上插件很多，有時間我決定繼續找，找到一個我認為完美的插件
第三個插件：(重磅推出)
這是我發現的最好的一個插件了，網上說也是最常用，用到這個以后，上面說到的兩個都解決了，而且貌似是官網里的，這個我覺得實在太好用了，好了還是說說怎么用了：
目錄結構：
--css
--.css
--
--.gif
--js
.js
-.js(壓縮版)
在這里要注意一下，因為彈出窗口彈出來以后，如果內容還沒顯示，那么會有一個加載過程，這個時候就有一個動態的加載圖片這里就是
.gif,這個圖片是可以換的，這個實現是通過修改js文件來實現了，js文件中有這樣的一句：
這里要注意了，這個路徑要寫對，這個路徑不是相對于js文件的，而是相對于整個工程的，所以要寫下你的gif圖片的完整路徑
我的是這樣的：
--
---style
--css
--
---.gif
--js
所以這個路徑要寫成像我上面那樣
對于我的那個效果很簡單:
查看
一句話搞定,注意這個class=""是一定要寫的,網上有很多關于這個的資料,這里就不詳細講了