. 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');

. 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'

});

. 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')}}

                ]

});

. 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']

});

. Use as a notification widget - no buttons and close automatically after  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':

});

. External content loaded via AJAX. Click here to open.

new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {

    'source':  {'ajax': 'ajax.html'},

    width: ,

    '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':

    }},

    width: ,

    title:  'External content loaded in an iFrame'

});

. 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 # }

.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 :

                alerttype = 'error';

                alerttitle = '错误提示';

                break;

            case :

                alerttype = 'warning';

                alerttitle = '警告提示';

                break;

            case :

                alerttype = 'information';

                alerttitle = '消息提示';

                break;

            case :

                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();

//                }

//            }

//        }

//    ]

//}, "拒绝理由");