jQuery的UI庫中的dialog效果很不錯，在這裡記錄一下簡單的一些使用方式以及一些配置的引數意義： 簡單的使用可以在jQuery UI的官方demo中看到，具體的使用方式如下： 在html檔案中新增一個<div id='mydiv'></div> 在js檔案中呼叫：$('#mydiv').dialog()即可，這樣就可以建立一個最基本的dialog，在.dialog()方法中可以新增一些配置引數，如下

autoOpen：是否立即顯示對話方塊，預設為true modal：在開啟該dialog時是否遮蔽html，預設為false closeOnEscape：按ESC鍵能否關閉對話方塊，預設為true draggable：可否拉動對話方塊，預設為true resizeable：是否可以在右下角調整對話方塊大小，預設為true title：對話方塊的標題頭 position：使用[right,top]或者一些預設值如'center','left','rigt','top','bottom'來確定對話框出現的位置,預設為center,陣列中的數值的單位為畫素,也可以使用如position:["left","bottom"]使得對話框出現在左上角 width：對話方塊的寬度 height：對話方塊的高度 minWidth：resizeable為true時可用，調整對話方塊大小時的最小寬度 maxWidth：resizeable為true時可用，調整對話方塊大小時的最大寬度 minHeight：resizeable為true時可用，調整對話方塊大小時的最小高度 maxHeight：resizeable為true時可用，調整對話方塊大小時的最大高度 hide：對話方塊隱藏時的動畫效果，引數為jQuery UI Effect中支援hide和show的樣式 show：對話框出現時的動畫效果，引數為jQuery UI Effect中支援hide和show的樣式 stack：對話方塊是否能疊在其他對話方塊之上，預設為true zIndex：對話方塊的顯示優先順序，一個整型，大的在上面，預設1000 buttons：裡面定義了出現的按鈕，一個map，屬性名為按鈕顯示的文字，屬性值為一個函式

dialog例項：             $("#mydiv").dialog({ autoOpen:false, modal:true, closeOnEscape:true, draggable:false, resizable:true, title:'this is a dialog', position:'center', width:500, height:500, minWidth:300, minHeight:300, maxWidth:700, maxHeight:700, hide:'drop', show:'explode', buttons: { 'close':function(){ $(this).dialog('close'); }, 'other':function(){ $(this).dialog('close'); } } }); $('#dialogBtn').toggle(function() { $('#mydiv').dialog('open'); }, function() { $('#mydiv').dialog('close'); }); jQuery UI Effects：             'blind'     從上到下出現、從下到上收起

  'bounce'     上下晃動元素   'clip'        從中間向上下出現、從上下向中間消失   'drop'       從左邊向右邊逐漸出現並不斷降低透明度、從右邊向左邊不斷消失並不斷提高透明度   'explode'    分成9個格子向中間集合、分成9個格子向四周發散   'fold'       先向右，再向下出現、先向上，再向左消失   'highlight'   高亮某個元素     'puff'       從大到小逐漸清晰直到出現、從小到大直到模糊消失   'pulsate'     閃爍元素     'scale'      從中間向四周伸展開、從四周向中間收攏   'shake'       左右晃動元素     'size'       與scale類似   'slide'      從左向右滑出、從右向左滑動至消失