Dialog demo #view docs

例子1

创建一个对话框。

new $.ui.Dialog( '#runDemo1', {
    title : '对话框标题',
    content : '对话框内容',
    yesFn : function(){
        alert( '我是确定按钮，回调函数返回false时不会关闭对话框。' );
        return false;
    },
    noFn : function(){
        alert( '我是取消按钮' );
    }
});

运行

例子2

创建一个对话框，不要遮罩层，传递 HTML 字符串作为内容。

new $.ui.Dialog( '#runDemo2', {
    content : '不设置标题，直接不显示标题栏',
    overlay : false
});

运行

例子3

创建一个对话框，并设置其显示和隐藏的动画效果为淡入淡出。

new $.ui.Dialog( '#runDemo3', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为淡入淡出。',
    effects : 'fade'
});

运行

例子4

创建一个对话框，并设置其显示和隐藏的动画效果为滑动。

new $.ui.Dialog( '#runDemo4', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为滑动。',
    effects : 'slide'
});

运行

例子5

创建一个对话框，并设置其显示和隐藏的动画效果为缩放。

new $.ui.Dialog( '#runDemo5', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为缩放。',
    effects : 'zoom'
});

运行

例子6

创建一个对话框，并设置其在左上角显示。

new $.ui.Dialog( '#runDemo6', {
    title : '非垂直居中的对话框',
    content : '设置对话框在左上角显示。',
    top : '100px',
    left : '100px'
});

运行

例子7

自定义对话框的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'
});

运行