对话框案例

静态对话框 可拖拽对话框/button> 绝对定位对话框

组件使用方式

同一时间只能有一个打开的对话框。

    $(document).ready(function(){
        $.Dialog({
            'title'       : 'My dialog title',
            'content'     : 'HTML content',
            'draggable'   : true,
            'overlay'     : true,
            'closeButton' : true,
            'buttonsAlign': 'right',
            'position'    : {
                'zone'    : 'right'
            },
            'buttons'     : {
                'button1'     : {
                    'action': function(){}
                },
                'button2'     : {
                    'action': function(){}
                }
            }
        });
    });

参数

• title - 对话框的标题(HTML格式)
• content - 对话框的内容 (HTML 格式)
• draggable - 设置对话框是否可被拖拽，可选值为: true, false (默认: false)
• overlay - 设置页面的覆盖层 (设置为false时只是不显示覆盖层的效果，div还是会存在), 可选值为: true, false (默认: true)
• closeButton - 启用还是禁用close按钮，可选值为: true, false (默认: false)
• buttonsAlign - 按钮的排列位置，可选值为: left, center, right (默认: center)
• buttons - 设置在功能条上出现的按钮 (JSON 格式)
  • name - 按钮上显示的文本 (JSON 格式)
    • action - 绑定到按钮上的动作
• position - 设置对话框的初始位置 (JSON 格式)
  • zone - 对话框出现的区域，可选值为: left, center, right (默认: center)
  • offsetY - 距离上边缘的距离（单位：像素）
  • offsetX - 距离左边缘的距离（单位：像素）

Javascript

在文档的head部分包含 dialog.js文件