jquery自定义confirm与alert

jquery.alerts.js

// jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Visit http://abeautifulsite.net/notebook/87 for more information
//
// Usage:
//        jAlert( message, [title, callback] )
//        jConfirm( message, [title, callback] )
//        jPrompt( message, [value, title, callback] )
// 
// History:
//
//        1.00 - Released (29 December 2008)
//
//        1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC. 
//
(function($) {
    
    $.alerts = {
        
        // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
        
        verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
        horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
        repositionOnResize: true,           // re-centers the dialog on window resize
        overlayOpacity: .01,                // transparency level of overlay
        overlayColor: '#FFF',               // base color of overlay
        draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
        okButton: ' 确认 ',         // text for the OK button
        cancelButton: ' 取消 ', // text for the Cancel button
        dialogClass: null,                  // if specified, this class will be applied to all dialogs
        
        // Public methods
        
        alert: function(message, title, callback) {
            if( title == null ) title = 'Alert';
            $.alerts._show(title, message, null, 'alert', function(result) {
                if( callback ) callback(result);
            });
        },
        
        confirm: function (message, title, callback) {
            if( title == null ) title = 'Confirm';
            $.alerts._show(title, message, null, 'confirm', function(result) {
                if( callback ) callback(result);
            });
        },
            
        prompt: function(message, value, title, callback) {
            if( title == null ) title = 'Prompt';
            $.alerts._show(title, message, value, 'prompt', function(result) {
                if( callback ) callback(result);
            });
        },
        
        // Private methods
        
        _show: function(title, msg, value, type, callback) {
            
            $.alerts._hide();
            $.alerts._overlay('show');
            
            $("BODY").append(
              '<div id="popup_container">' +
                '<h1 id="popup_title"></h1>' +
                '<div id="popup_content">' +
                  '<div id="popup_message"></div>' +
                '</div>' +
              '</div>');
            
            if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);
            
            // IE6 Fix
            var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 
            
            $("#popup_container").css({
                position: pos,
                zIndex: 99999,
                padding: 0,
                margin: 0
            });
            
            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html( $("#popup_message").text().replace(/
/g, '<br />') );
            
            $("#popup_container").css({
                minWidth: $("#popup_container").outerWidth(),
                maxWidth: $("#popup_container").outerWidth()
            });
            
            $.alerts._reposition();
            $.alerts._maintainPosition(true);
            
            switch( type ) {
                case 'alert':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
                    $("#popup_ok").click( function() {
                        $.alerts._hide();
                        callback(true);
                    });
                    $("#popup_ok").focus().keypress( function(e) {
                        if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
                    });
                break;
                case 'confirm':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_ok").click(function () { 
                        $.alerts._hide();
                        if( callback ) callback(true);
                    });
                    $("#popup_cancel").click(function () {
                        $.alerts._hide();
                        if( callback ) callback(false);
                    });
                    $("#popup_ok").focus();
                    $("#popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                break;
                case 'prompt':
                    $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_prompt").width( $("#popup_message").width() );
                    $("#popup_ok").click( function() {
                        var val = $("#popup_prompt").val();
                        $.alerts._hide();
                        if( callback ) callback( val );
                    });
                    $("#popup_cancel").click( function() {
                        $.alerts._hide();
                        if( callback ) callback( null );
                    });
                    $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                    if( value ) $("#popup_prompt").val(value);
                    $("#popup_prompt").focus().select();
                break;
            }
            
            // Make draggable
            if( $.alerts.draggable ) {
                try {
                    $("#popup_container").draggable({ handle: $("#popup_title") });
                    $("#popup_title").css({ cursor: 'move' });
                } catch(e) { /* requires jQuery UI draggables */ }
            }
        },
        
        _hide: function() {
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false);
        },
        
        _overlay: function(status) {
            switch( status ) {
                case 'show':
                    $.alerts._overlay('hide');
                    $("BODY").append('<div id="popup_overlay"></div>');
                    $("#popup_overlay").css({
                        position: 'absolute',
                        zIndex: 99998,
                        top: '0px',
                        left: '0px',
                         '100%',
                        height: $(document).height(),
                        background: $.alerts.overlayColor,
                        opacity: $.alerts.overlayOpacity
                    });
                break;
                case 'hide':
                    $("#popup_overlay").remove();
                break;
            }
        },
        
        _reposition: function() {
            var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
            var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
            if( top < 0 ) top = 0;
            if( left < 0 ) left = 0;
            
            // IE6 fix
            if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();
            
            $("#popup_container").css({
                top: top + 'px',
                left: left + 'px'
            });
            $("#popup_overlay").height( $(document).height() );
        },
        
        _maintainPosition: function(status) {
            if( $.alerts.repositionOnResize ) {
                switch(status) {
                    case true:
                        $(window).bind('resize', $.alerts._reposition);
                    break;
                    case false:
                        $(window).unbind('resize', $.alerts._reposition);
                    break;
                }
            }
        }
        
    }
    
    // Shortuct functions
    jAlert = function(message, title, callback) {
        $.alerts.alert(message, title, callback);
    }
    
    jConfirm = function(message, title, callback) {
        $.alerts.confirm(message, title, callback);
    };
        
    jPrompt = function(message, value, title, callback) {
        $.alerts.prompt(message, value, title, callback);
    };
    
})(jQuery);

jquery.alerts.css

#popup_container {
    BORDER-RIGHT: #999 5px solid; BORDER-TOP: #999 5px solid; MIN-WIDTH: 300px; FONT-SIZE: 12px; BACKGROUND: #fff; MAX-WIDTH: 600px; BORDER-LEFT: #999 5px solid; COLOR: #000; BORDER-BOTTOM: #999 5px solid; FONT-FAMILY: Arial, sans-serif; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px
}
#popup_title {
    BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0em; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0em; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(images/title.gif) #ccc repeat-x 50% top; PADDING-BOTTOM: 0em; MARGIN: 0em; BORDER-LEFT: #fff 1px solid; CURSOR: default; COLOR: #666; LINE-HEIGHT: 1.75em; PADDING-TOP: 0em; BORDER-BOTTOM: #999 1px solid; TEXT-ALIGN: center
}
#popup_content {
    PADDING-RIGHT: 1.75em; PADDING-LEFT: 1.75em; BACKGROUND: url(images/info.gif) no-repeat 16px 16px; PADDING-BOTTOM: 1em; MARGIN: 0em; PADDING-TOP: 1em
}
.alert#popup_content {
    BACKGROUND-IMAGE: url(images/info.gif)
}
.confirm#popup_content {
    BACKGROUND-IMAGE: url(images/important.gif)
}
.prompt#popup_content {
    BACKGROUND-IMAGE: url(images/help.gif)
}
#popup_message {
    PADDING-LEFT: 48px
}
#popup_panel {
    MARGIN: 1em 0em 0em 1em; TEXT-ALIGN: center
}
#popup_prompt {
    MARGIN: 1em 0em
}

https://www.cnblogs.com/ynxrsoft/p/7978279.html
https://www.cnblogs.com/chuaWeb/p/5084971.html