s1.引用：jQuery dialog

<linkrel="stylesheet"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><linkrel="stylesheet"href="http://jqueryui.com/resources/demos/style.css"
 
>

s2.這個是常用的dialog的方法，

 $( "#dialog" ).dialog({

     resizable: false,

     height:140,

     modal: true,

//按鈕

     buttons: {

       "取消": function() {

//關閉按鈕

         $( this ).dialog( "close" );

       },

       "確定": function() {

         $( this ).dialog( "close" );

alert("確定");

       },

  "刪除": function() {

         $( this ).dialog( "close" );

alert("刪除");

       }

     }

   });

 });

 s3.lhgDialog常用的屬性：

1. 標題 [title]

   $.dialog({title:'我是新標題'});

2. 內容 [content]

   1. 傳入字串

   $.dialog({content:'我支援HTML'});

   2. 使用iframe方式載入單獨的內容頁

   $.dialog({content:'url:content/content.html'});

3. 確定取消按鈕 [ok & cancel]

   備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉

   $.dialog({
       content:'如果定義了回撥函式才會出現相應的按鈕',
       ok:function(){
   this.title('3秒後自動關閉').time(3);
   returnfalse;
   },
       cancelVal:'關閉',
       cancel:true/*為true等價於function(){}*/
   });

4. 最大化最小化按鈕 [max & min]

   備註：此引數是用來顯示或隱藏最大化最小化按鈕

   $.dialog({
       content:'不顯示最大化和最小化按鈕',
       max:false,
       min:false
   });

5. 自定義按鈕 [button]

   備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"

   $.dialog({
       id:'testID',
       content:'hello world!',
       button:[
   {
               name:'同意',
               callback:function(){
   this.content('你同意了').time(2);
   returnfalse;
   },
               focus:true
   },
   {
               name:'不同意',
               callback:function(){
                   alert('你不同意')
   }
   },
   {
               name:'無效按鈕',
               disabled:true
   },
   {
               name:'關閉我'
   }
   ]
   });

6. 設定大小 [width & height]

   備註：尺寸可以帶單位或使用百分比%

   $.dialog({
       width:'700px',
       height:500,
       content:'url:http://www.baidu.com'
   });

7. 靜止定位 [fixed]

   $.dialog({
   fixed:true,
       content:'請拖動滾動條檢視'
   });

8. 自定義座標 [left & top]

   備註：尺寸可以帶單位或使用百分比%

   $.dialog({
       left:100,
       top:'60%',
       content:'我改變座標了'
   });

   建立一個右下角浮動的訊息視窗

   $.dialog({
       id:'msg',
       title:'公告',
       content:'歡迎使用lhgdialog視窗!',
       width:200,
       height:100,
       left:'100%',
       top:'100%',
   fixed:true,
       drag:false,
       resize:false
   });

9. 鎖屏 [lock & background & opacity]

   備註：background & opacity是一個會影響到全域性的配置，後續出現的對話方塊再設定這2個引數將不再起作用

   $.dialog({
   lock:true,
       background:'#000',/* 背景色 */
       opacity:0.5,/* 透明度 */
       content:'中斷使用者在對話方塊以外的互動，展示重要操作與訊息',
       icon:'error.gif',
       ok:function(){
   /* 這裡要注意多層鎖屏一定要加parent引數 */
           $.dialog({content:'再來一個鎖屏',lock:true, parent:this});
   returnfalse;
   },
       cancel:true
   });

10. 定義訊息圖示和標題欄圖村 [icon & titleIcon]

    $.dialog({
        icon:'success.gif',
        titleIcon:'lhgcore.gif',
        content:'我可以定義訊息圖示哦'
    });

11. 內容與邊界填充邊距 [padding]

    備註：注意圖片加上width和height，否則出現位置偏移

    $.dialog({
        id:'a15',
        title:'Android4.0照片',
    lock:true,
        content:'<img src="/images/android.jpg" width="600" height="404" />',
        padding:0
    });

12. 定時關閉的訊息 [time]

    $.dialog({
        time:2,
        content:'兩秒後關閉'
    });

13. 不許拖拽 [drag & resize]

    $.dialog({
        drag:false,
        resize:false,
        content:'禁止拖拽'
    });

14. 防止重複彈出 [id]

    $.dialog({
        id:'testID2',
        content:'再次點選執行看看'
    });
    $.dialog({id:'testID2'}).title('3秒後關閉').time(3);

15. 初始化和關閉回撥函式 [init & close]

    備註：回撥函式中this指向視窗例項物件本身

    $.dialog({
        content:'初始化函式執行前視窗的內容',
        left:'20%',
        init:function(){
            alert('正在執行初始化函式，此時你可看到視窗內容沒有發生變化');
    this.content('我是初始化函式執行後的視窗中的內容');
    },
        close:function(){
            alert('我是視窗關閉前執行的函式，如果返回false將阻止視窗關閉');
    }
    });

16. 父視窗物件 [parent]

    備註：此引數只用在開啟多層視窗都使用遮罩層時才會用到此引數，注意多層視窗鎖屏時一定要加此引數

    $.dialog({
        id:'LHG1976D',
    /* ifrst.html 和 second.html 中的程式碼請自行檢視 */
        content:'url:content/first.html',
    lock:true
    });

擴充套件方法演示

備註：擴充套件方法支援鏈式操作

1. 直接引用返回 [content() & title()]

   var api = $.dialog({
       title:'我是對話方塊',
       content:'我是初始化的內容'
   });
   api.content('對話方塊內容被擴充套件方法改變了').title('提示');

2. 重新整理跳轉頁面 [reload()]

   $.dialog({
       content:'點確定按鈕後將重新整理視窗呼叫頁面',
       ok:function(){
   this.reload();
   }
   });

3. 按鈕介面演示 [button()]

   備註：回撥函式如果返回false將阻止對話方塊關閉

   var dialog = $.dialog({
       title:'警告',
       content:'點選管理按鈕將讓刪除按鈕可用',
       width:'20em',
       button:[{
           name:'管理',
           callback:function(){
   this
   .content('我更改了刪除按鈕')
   .button({
                   name:'刪除',
                   disabled:false
   })
   .lock();
   returnfalse;
   },
           focus:true
   }]
   });
   
   dialog.button(
   {
           name:'刪除',
           callback:function(){
               alert('delect')
   },
           disabled:true
   }
   )

4. 通過對話方塊ID引用 [get()]

   var api1 = $.dialog({
       content:'我是視窗中的內容',
       id:'LHG76D'
   });
   api1.get('LHG76D',1).content('我改變了視窗內容，並在2秒後關閉').time(2);

5. 最大化和最小化 [max() & min()]

   $.dialog({
       content:'我現在是最大化視窗，點確定按鈕最小化視窗',
       id:'LHG78D',
       ok:function(){
   this.min();/* 這裡呼叫了最小化方法 */
   returnfalse;
   }
   }).max();

6. 標題倒計時

   var timer;
   $.dialog({
       content:'時間越來越少，越來越少..',
       init:function(){
   var that =this, i =5;
   var fn =function(){
               that.title(i +'秒後關閉');
   !i && that.close();
               i --;
   };
           timer = setInterval(fn,1000);
           fn();
   },
       close:function(){
           clearInterval(timer);
   }
   });

7. 關閉不刪除內容 [hide() & show()]

   $.dialog({
       id:'show-hide',
       content:'關閉後阻止對話方塊被刪除，只隱藏對話方塊',
       close:function(){
   this.hide();
   returnfalse;
   }
   })

8. AJAX高階應用：執行HTML片段中特殊script標籤

   備註：HTML片段中的<script type="text/dialog"></script>標籤包裹的javascript將會在lhgdialog內部執行，其this指向對話方塊擴充套件方法，這樣可以進一步實現訊息內容模組化。

   (本例子使用了AJAX，需要在伺服器上執行。可開啟 content/login.html 檢視原始碼中的自定義指令碼)

   var api = $.dialog({id:'L1360',title:false});
   
   /* jQuery ajax */
   $.ajax({
       url:'content/login.html',
       success:function(data){
           api.content(data);
   },
       cache:false
   });

外部方法演示

1. $.dialog.load() 方法

   備註：此方法為Ajax填充內容

   $.dialog.load('content/ajax.html',{max:false,min:false});

2. $.dialog.alert() 方法

   $.dialog.alert('請不要點選確定按鈕！',function(){
       alert('叫你不要點你非典');
   });

3. $.dialog.confirm() 方法

   $.dialog.confirm('你確定要刪除這掉訊息嗎？',function(){
       $.dialog.tips('執行確定操作');
   },function(){
       $.dialog.tips('執行取消操作');
   });

4. $.dialog.prompt() 方法

   $.dialog.prompt('請輸入圖片網址',
   function(val){
           $.dialog.tips(val);
   },
   'http://'
   );

5. $.dialog.tips() 方法

   /* 下面的只是演示程式碼，實際應用中一般這樣寫：
    * $.dialog.tips('資料載入中...',600,'loading.gif');
    * [這裡是你要執行的程式碼]
    * $.dialog.tips('資料載入完畢',1,'success.gif',function(){ 這裡寫完成後執行的其它程式碼 });
    */
   $.dialog.tips('資料載入中...',600,'loading.gif');
   
   setTimeout(function(){
       $.dialog.tips('資料載入完畢',1,'tips.gif',function(){alert('載入完成後你要做什麼？');});
   },5000);

6. 呼叫頁面與視窗間的資料互傳

   $.dialog.data('txtObj',$('#txt1')[0]);/* 通過資料共享方法來儲存文字框物件 */
   $.dialog.data('txt1',$('#txt1').val());/* 通過資料共享的方法來儲存文字框中的值 */
   
   $.dialog('url:content/value.html');