jQuery插件之Facebook風格模態框
$.fn.jmodal是基于jQuery的插件,通過div和透明效果來模擬模態對話框,效果圖如下:
源代碼可到此下載:jquery.jmodal.js
下面介紹下此插件的使用方法:
- 引用jquery腳本(v1.3.*)
- 引用jquery.jmodal.js
- 觸發對話框彈出的腳本為:
1
$.fn.jmodal({
2title:'Information',
3content:'Hi,you displayed me?',
4buttonText:'Yes,It\'s me',
5okEvent:function(e){
6alert('jmodal\'ll be closed after u click me:-)');
7}
8});
- content參數包含兩種類型:String和Function,當為String類型的時候設置的文本信息將直接顯示在彈出框中,當使用Function類型的時候,比如我們需要使用一個ajax的方法去獲取特定的內容:
1
$.fn.jmodal({
2title:'Information',
3content:function(e){
4e.html('loading
');
5e.load('templates/templatehtml.htm',function(msg){
6//code
7});
8},
9buttonText:'Yes,It\'s me',
10okEvent:function(e){
11alert('jmodal\'ll be closed after u click me:-)');
12}
13});
那么此時可以傳遞一個function給content, jmodal會同樣會傳遞一個參數給這個function,比如示例中的'e',指的就是content的容器(jquery對象),那么使用'e.load()'方法就可以使用ajax加載需要的模板或者內容 ( 當然,同樣也可以$.ajax ).
ps: 源碼注釋中有詳細的API說明,live demo
全站熱搜