Zebra_Dialog-简单实用的jQuery模态对话框插件 A small, compact, and highly configurable jQuery plugin for creating modal dialog boxes

jQuery之家 返回下载页
默认对话框 扁平风格

Zebra_Dialog Demo：默认对话框

1. 默认不带参数配置的对话框。点击这里 查看效果。 
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');

 

2. 以下是5种类型的对话框: error, warning, question, information and confirmation. 
// this example is for the "error" box only
// for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
// and the text for the "title" property also changes
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
    'type':     'error',
    'title':    'Error'
});

 

3. 自定义按钮和回调函数。点击这里查看效果。

注意：onClose事件在对话框关闭后才被执行。你可以参考下一个例子如何在关闭对话框之前来执行函数。 
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
    'type':     'question',
    'title':    'Custom buttons',
    'buttons':  ['Yes', 'No', 'Help'],
    'onClose':  function(caption) {
        alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
    }
});

 

3.1自定义带回调函数的按钮。点击 这里查看效果。

注意：附加到按钮上的函数会在对话框关闭前触发（按钮一点就就触发）。 
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
    'type':     'question',
    'title':    'Custom buttons',
    'buttons':  [
                    {caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
                    {caption: 'No', callback: function() { alert('"No" was clicked')}},
                    {caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
                ]
});

 

4. 将对话框放置在屏幕的右上角位置。点击这里查看效果。 
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
    'title':    'Custom positioning',
    'position': ['right - 20', 'top + 20']
});

 

5. 使用消息提示模式-不带按钮，2秒后自动消失。

注意：这种模式需要使用new关键字来实例化对象，最后打开的对话框将被关闭。
点击这里查看效果。 
new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
    'buttons':  false,
    'modal': false,
    'position': ['right - 20', 'top + 20'],
    'auto_close': 2000
});

 

6. 通过AJAX加载外部内容。 点击这里查看效果。 
new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {
    'source':  {'ajax': 'ajax.html'},
    width: 600,
    'title': 'External content loaded via AJAX'
});

 

6.1 在iFrame中加载外部内容。 点击 这里 查看效果。 
new $.Zebra_Dialog('<strong>Content loaded via AJAX:</strong>', {
    source: {'iframe': {
        'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',
        'height': 500
    }},
    width: 800,
    title:  'External content loaded in an iFrame'
});

 

7. 自定义外观-标题为蓝黑色背景，以及一个自定义图标。

CSS样式为： 
/* Notice how we're targting the dialog box's title bar through the custom class */
.myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid #222 }
.myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }
点击 这里 查看效果。
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
    'custom_class':  'myclass',
    'title': 'Customizing the appearance'
});