jquery+jBox仿QQ空間DIV窗口

QQ校友DIV模擬窗口:
 
最近有一個學生信息平臺要做,估計也將成為我的畢業設計。打算做成和QQ校友一樣,於是便開始瞭一系列的模仿。

既然是要提高用戶體驗,ajax當然必不可少,p模擬窗口也是必不可少的瞭,這次我還是拿那個jBox源碼來修改。
Js代碼 
jBox.open('jBoxID2', 'inline', '<p>如果您在使用本系統有發現任何問題<p>', '意見反饋', 'width=300,height=60,center=true,draggable=true,model=true'); 
 
demo文件
 
 
 
QQ空間的DIV窗口:
QQ空間的DIV窗口樣子倒是不錯,可惜搞源碼不容易,隻好拿jBox代碼修改下。
效果圖如下:


那怎麼調用呢。
有一種是iframe調用,就是把另一個頁面嵌入到p窗口中來。
Js代碼 
jBox.open('iframe-jBoxID','iframe','Login.aspx','用戶登錄','width=400,height=250,center=true,draggable=true,model=true'); 
 
還有一種是先在頁面寫一些將要顯示到p窗口裡面的代碼,如:
Js代碼 
<p id="login-table" style="display:none;">test</p> 
 接下來就可以很容易調用瞭。
 
Js代碼 
$('#login-table').openjBox('width=400,height=250,center=true,draggable=true,model=true','用戶登錄'); 

作者“A+”
 

發佈留言