创建一个对话框。
new $.ui.Dialog( '#runDemo1', { title : '对话框标题', content : '对话框内容', yesFn : function(){ alert( '我是确定按钮,回调函数返回false时不会关闭对话框。' ); return false; }, noFn : function(){ alert( '我是取消按钮' ); } });
创建一个对话框,不要遮罩层,传递 HTML 字符串作为内容。
new $.ui.Dialog( '#runDemo2', { content : '不设置标题,直接不显示标题栏', overlay : false });
创建一个对话框,并设置其显示和隐藏的动画效果为淡入淡出。
new $.ui.Dialog( '#runDemo3', { title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为淡入淡出。', effects : 'fade' });
创建一个对话框,并设置其显示和隐藏的动画效果为滑动。
new $.ui.Dialog( '#runDemo4', { title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为滑动。', effects : 'slide' });
创建一个对话框,并设置其显示和隐藏的动画效果为缩放。
new $.ui.Dialog( '#runDemo5', { title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为缩放。', effects : 'zoom' });
创建一个对话框,并设置其在左上角显示。
new $.ui.Dialog( '#runDemo6', { title : '非垂直居中的对话框', content : '设置对话框在左上角显示。', top : '100px', left : '100px' });
自定义对话框的HTML结构。
<div id="testBox" style="width:120px; height:100px; background:#fff; text-align:center; line-height:100px; display:none;">Press Esc close.</div>
new $.ui.Dialog( '#runDemo7', { elem : '#testBox', dragHandle : '#testBox' });