jQuery通用对话框

先上代码，在LinPanxing大神的基础上修改而成

Popup.js

// jQuery Dialogs Plugin// Version 1.1// Cory S.N. LaViska // Edit by LinPanxing // Modify by SiNiao(function($) {    $.popup = {        ID: null,        title: "",        top: 0,        left: 0,        width: 0,        height: 0,        popType: "",        repositionOnResize: false,          // 窗口调整大小后是否重新定位        okButton: '确 定',                  // 确定按钮        cancelButton: '取 消',              // 取消按钮        isButtonRow: false,                 // 是否显示按钮        isOverlay:null,// 是否显示遮罩        isPopup: false,                     // 是否为popup窗口        autoClose: 0,                       // 窗口自动关闭 (大于0时窗口自动关闭)               prompt: function(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup) {                                                 this.ID = 'prompt';            //如果已有对话框则终止            if ($("#_Popup_" + this.ID).length > 0) {            return;            }            this.title = title;            this.popType = 'prompt';            this.isButtonRow = isButtonRow;            this.autoClose=autoClose;               if(isOverlay==false) {            this.isOverlay=false;             } else {            this.isOverlay=true;             }                                               this.top=top;                                             this.isPopup = isPopup || this.isPopup;                      this.width = width || 300;            this.height = height || 120;            $.popup._show(msg, function(result) {                if (callback) {                  callback(result);                }            });        },        // 私有方法        _show: function(msg, callback) {                            if ($("#_Popup_" + this.ID).length < 1) {                                                                  var html =    '<div class="popup_' + this.popType + '" id="_Popup_' + this.ID + '" style="width:' + this.width + 'px">\                  <div class="popup_header"><table style="width:'+(this.width-10)+'px" id="_Title_"><tr><td><h1>' + this.title + '</h1></td>\                  <td align="right"><span id="_CloseButton_' + this.ID + '" class="prompt_button">×<span></td></tr></table></div>\                  <div class="popup_content">\                    <div id="_Container_' + this.ID + (this.height == 0 ? '">' : '" style="height:' + this.height + 'px">') + msg + '</div></div>' +                    '<div class="buttonRow" id="_ButtonRow_' + this.ID + '"></div>' +                  '<div class="popup_bottom"><div class="b_r"></div>\                </div>';                                                                     $("BODY").append(html); //填充                                                                // IE6 Fix                //var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';                $("#_Popup_" + this.ID).css({                    position: 'absolute',                    zIndex: 100,                    padding: 0,                    margin: 0,                    minWidth: $("#_Popup_" + this.ID).outerWidth(),                    maxWidth: $("#_Popup_" + this.ID).outerWidth()                });                //zIndex 属性设置元素的堆叠顺序，仅能在定位元素上奏效（例如 position:absolute;）                           $.popup._reposition(); //定位                $.popup._maintainPosition(true); //位置随窗口大小改变                   //关闭按钮事件                                 $("#_CloseButton_" + this.ID).click(function() {                                                                               $.popup._hide();                });                                $.popup._bindType(callback);                                                               //增加遮罩                                if(this.isOverlay) {                $("BODY").append('<div id="_overlay" class="overlay"></div>');                $("#_overlay").css({                    width:$(document).width(),                    height:$(document).height()                });                }                // Popup 窗口方法待测试                if (this.isPopup) {                                        $("#_Popup_" + this.ID).click(function(e) {                                            e ? e.stopPropagation() : event.cancelBubble = true;                    });                    $(document).click(function() {                        $.popup._hide();                    });                }                if (this.autoClose > 0) {                    $.popup._autoClose();                }            }            else {                                                    $("#_Container_" + this.ID).html(msg);                $.popup._bindType(callback);                $.popup._reposition();                $.popup._maintainPosition(true);                $("#_Popup_" + this.ID).show();                if (this.autoClose > 0) {                    $.popup._autoClose();                }            }        },        _bindType: function(callback) {                                 switch (this.popType) {                case 'prompt':                                           if (this.isButtonRow==1) {                //添加按钮                                                $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" value="true"/>\                        <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>');                                           var id=this.ID;                        $("#_ButtonOK_" + this.ID)[0].focus();                        $("#_ButtonOK_" + this.ID).click(function() {                                                      var val = $("#hid_" + id).val();                                                        $.popup._hide();                        });                                                                                                $("#_Popup_" + id).keypress(function(e) {                                                                              if (e.keyCode == 13) $("#_ButtonOK_" + id).trigger('click');                                else if (e.keyCode == 27) $("#_ButtonOK_" + id).trigger('click');                                                  });                  }                       else if (this.isButtonRow==2) {                                                            //添加按钮                                                 $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" value="true"/>\                        <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>\                        <input type="button" value="' + $.popup.cancelButton + '" id="_ButtonCancel_' + this.ID + '"/>');                                                 var id=this.ID;                        $("#_ButtonOK_" + this.ID)[0].focus();                        $("#_ButtonOK_" + this.ID).click(function() {                                                      var val = $("#hid_" + id).val();                                                        $.popup._hide();                            if (callback) callback(val);                        });                        $("#_ButtonCancel_" + this.ID).click(function() {                            $.popup._hide();                            if (callback) callback(false);                        });                                                                                                $("#_Popup_" + id).keypress(function(e) {                                                  //回车快捷键                            if (e.keyCode == 13&&document.activeElement.id!=("_ButtonCancel_" + id)) $("#_ButtonOK_" + id).trigger('click');                             //ESC快捷键                            else if (e.keyCode == 27) $("#_ButtonCancel_" + id).trigger('click');                         });                                                                    }                    break;                default:                    break;            }        },        _hide: function() {                            if ($("#_Popup_" + this.ID).length > 0) {                                       $("#_Popup_" + this.ID).remove();                                $.popup._maintainPosition(false);            }            if ($("#_overlay").length > 0) {                                       $("#_overlay").remove();                                            }                    },        _autoClose: function() {            setTimeout("$.popup._hide()", this.autoClose * 1000);        },        _reposition: function() {                          var top = this.top || (($(document).height() / 2) - ($("#_Popup_" + this.ID).outerHeight()/2));            var left = this.left || (($(document).width() / 2) - ($("#_Popup_" + this.ID).outerWidth()/2));                                   if (top < 0) top = 0;            if (left < 0) left = 0;            // IE6 fix            //if ($.browser.msie && parseInt($.browser.version) <= 6) top = top + $(window).scrollTop();            $("#_Popup_" + this.ID).css({                top: top + 'px',                left: left + 'px'            });                   },        _maintainPosition: function(status) {            if ($.popup.repositionOnResize) {                switch (status) {                    case true:                        $(window).bind('resize', $.popup._reposition); //绑定事件                        break;                    case false:                        $(window).unbind('resize', $.popup._reposition); //解绑事件                        break;                }            }        }    }        showPrompt = function(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup) {            $.popup.prompt(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup);    }})(jQuery);

Popup.css

*{padding:0;margin:0;}.overlay {  position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; filter: Alpha(Opacity = 50, FinishOpacity =50);}/*------- Prompt Style -------*/.popup_prompt{border:1px solid #909090; background:#D0E8FF; }.popup_prompt .popup_header{background:#328AA4;}.popup_prompt h1{height:25px;margin:0px;font-size:13px;color:#FFF;font-weight:bold;text-indent:10px;padding-top:7px;}.popup_prompt .prompt_button{float:right;  cursor: hand;  font-size:20px;  color:#FFF; }.popup_prompt .popup_content{margin:1px;padding:10px;font-size:13px;}.popup_prompt .buttonRow{height:30px;line-height:30px;text-align:right;margin:1px;}.popup_prompt input{color:#555;border:1px solid #808080;margin-right:5px;height:20px;line-height:18px;padding:0px 3px;}

功能依赖jQuery,记得引入。

使用时只需一行代码

 

示例1

showPrompt('对话框1', '自定义显示内容')

 

示例2

showPrompt('对话框2', '自定义显示内容',1)

 

示例3

showPrompt('对话框3', '自定义显示内容',2)

 

关于样式颜色修改：

Popup.css中

.popup_prompt的background为 对话框底色

.popup_prompt .popup_header的background为 对话框标题底色

.popup_prompt h1的color为 对话框标题文字前景色

.popup_prompt .prompt_button的color为 对话框标题关闭按钮前景色

 

 

Demo下载