Zebra_Dialog 弹出层插件

1. Default dialog box, no custom settings. Click here to open.
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
 

2. The five dialog box types, with titles: 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. Custom buttons and the callback function. Click here to open.
Note that the onClose event is executed *after* the dialog box is closed! see the next example for executing functions *before* the closing of the dialog box
$.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 Custom buttons with attached callback functions. Click here to open.
Note that the callback functions attached to custom buttons are executed *before* the dialog box is closed and as soon as a button is clicked! see the previous example for executing functions *after* the closing of the dialog box
$.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. Position the dialog box in the top-right corner. Click here to open.
$.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. Use as a notification widget - no buttons and close automatically after 2 seconds. 
Note how the plugin needs to be instantiated with the "new" keyword or only the last opened box will close!
Click here to open.
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. External content loaded via AJAX. Click here to open.
new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {
    'source':  {'ajax': 'ajax.html'},
    width: 600,
    'title': 'External content loaded via AJAX'
});
 

6.1 External content loaded in an iFrame. Click here to open.
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. Customizing the appearance - make the title bar have a dark-blue background and show a custom icon! 

The CSS is
/* 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') }
Click here to open.
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
    'custom_class':  'myclass',
    'title': 'Customizing the appearance'
});

(function ($) {
    $.psAlert = function (info, type,setting,title) {
        var alerttype = '';
        var alerttitle = '';
        switch (type) {
            case 1:
                alerttype = 'error';
                alerttitle = '错误提示';
                break;
            case 2:
                alerttype = 'warning';
                alerttitle = '警告提示';
                break;
            case 3:
                alerttype = 'information';
                alerttitle = '消息提示';
                break;
            case 4:
                alerttype = 'confirmation';
                alerttitle = '正确提示';
                break;
            default:
                alerttitle = title;
                break;
        }
        var defaults = {
            'type': alerttype,
            'title': alerttitle
        };
        var opts = $.extend(defaults, setting);
        new $.Zebra_Dialog(info, opts);
    };
})(jQuery);

//$.psAlert('请输入回复内容！', 2);

//if (result.DoFlag) {
//    $.psAlert(result.DoResult, 4, {
//        'buttons': [
//        {
//            caption: '确定', callback: function () {
//                location.reload();
//            }
//        }
//        ]
//    });
//}

//$.psAlert(rejectcontentbox, 0, {
//    'modal': true,
//    'overlay_close': false,
//    'custom_class': 'dialog',
//    'overlay_opacity': 0.5,
//    'width': 300,
//    'height': 200,
//    'buttons': [
//        {
//            caption: '确认',
//            callback: function () {
//                refusedReason = $.trim(($("#refusedre").val()));
//                if ($.trim(refusedReason).length == 0) {
//                    $.psAlert('请注明拒绝理由！', 2);
//                } else {
//                    auditComment();
//                }
//            }
//        }
//    ]
//}, "拒绝理由");