jquery封裝了一個簡潔輕巧的可拖動可自定義樣式的純div+css帶遮罩層的仿模態彈出框
阿新 • • 發佈:2019-02-03
最近封裝上癮,想起以前做的一個輕巧的彈出框,是樣式和指令碼分離的,於是重新封裝了一下,把樣式標籤統一到js裡了。
裡面還有一些問題,但不影響使用,有興趣的同學,可以參考完善下,有好的建議,請不吝賜教。
if (typeof jQuery === 'undefined') { throw 'no jquery'; } (function () { window.PopDialog = window.PopDialog || { defaultConfig:{ hasCover: true, //是否帶遮罩層 colorOfCover: "#000", //遮罩層顏色 opacity: 20, //遮罩層透明度 borderColor: "blue", //邊框標題背景顏色 titleHeight: 30, //標題高度 titleFont: '18px "Microsoft Yahei"', //標題字型 titleFontSize: 18, //標題文字大小 titleColor: "white", //標題文字顏色 titleFontFamily: "Microsoft Yahei", //標題字型 contentWidth: 560, //內容框寬度 contentHeight: 480, //內容框的高度 borderWidth: 2, //邊框寬度 backColor: "#EC90F6", //背景色 seq: 0, //序列號 moveAble: true, //是否可以滑鼠拖動 callBack: null, //回撥方法 }, mergeJsonObj: function (s, o) { var r = {}; for (var p in s) { r[p] = s[p]; } for (var q in o) { r[q] = o[q]; } return r; }, hToInt: function (c, n) { var s = c.toUpperCase(), i = s == 'A' ? 10 : s == 'B' ? 11 : s == 'C' ? 12 : s == 'D' ? 13 : s == 'E' ? 14 : s == 'F' ? 15 : parseInt(s, 10); return n == 0 ? i : i * 16; }, getRGB: function (c) { var rgb = {}, c = c.replace('#', ''); if (c.length == 3) { rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(0, 1), 0); rgb.g = this.hToInt(c.substr(1, 1), 1) + this.hToInt(c.substr(1, 1), 0); rgb.b = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(2, 1), 0); } else { rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(1, 1), 0); rgb.g = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(3, 1), 0); rgb.b = this.hToInt(c.substr(4, 1), 1) + this.hToInt(c.substr(5, 1), 0); } return rgb; }, show: function (containner, content, title, config) { content = content || "這裡什麼都沒有!"; title = title || "提示"; var dialog = new Object, c = dialog.config = this.mergeJsonObj(this.defaultConfig, config); c.id = 'pop_' + c.seq++; containner.attr("popIdx", c.id); var opacity = c.opacity / 100, rgb = this.getRGB(c.colorOfCover), width = c.contentWidth + c.borderWidth * 2, height = c.contentHeight + c.borderWidth + c.titleHeight; dialog.cover = $('<div id="' + c.id + '_cover" style="background-color: rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ');width:100%;height:100%;position:absolute;top:0;left:0;"z-index:99999></div>'); dialog.frame = $('<div id="' + c.id + '_frame" style="background-color:' + c.borderColor + ';position:fixed;width: ' + width + 'px;height: ' + height + 'px;top:calc(50% - ' + height / 2 + 'px);left:calc(50% - ' + width / 2 + 'px);"></div>'); dialog.top = $('<div id="' + c.id + '_top" style="background-color:' + c.borderColor + ';height:' + c.titleHeight + 'px;line-height:' + c.titleHeight + 'px;display:block;width:100%;clear:both;vertical-align:middle"></div>').appendTo(dialog.frame); dialog.title = $('<span id="' + c.id + '_title" style="display:inline-block;font-size:' + c.titleFontSize + 'px;padding-left:10px;color:' + c.titleColor + ';">' + (title || "提示") + '</span>').appendTo(dialog.top); dialog.close = $('<a id="' + c.id + '_close" style="display:block;float:right;text-decoration: none;margin-right:10px;clear:right;color:white;font-size:' + c.titleHeight * 8 / 10 + 'px;" href="#">X</a>').appendTo(dialog.top); dialog.body = $('<div id="' + c.id + '_content" style="background-color:' + c.backColor + ';width:' + c.contentWidth + 'px;height:' + c.contentHeight + 'px;margin-left:' + c.borderWidth + 'px;">' + content + '</div>').appendTo(dialog.frame); if (c.hasCover) { dialog.PopDom = dialog.cover; dialog.frame.appendTo(dialog.cover); dialog.PopDom.appendTo(containner); } else { dialog.PopDom = dialog.frame.appendTo(containner); } dialog.close.on("click", function () { var str = $(this).attr('id').replace('close', ''); $('[id^="' + str + '"]').remove(); }) dialog.x = dialog.y = dialog.mousekey = 0; if (c.moveAble) { dialog.top.on("mousedown", function (event) { dialog.mousekey = true; dialog.top.css("cursor", "move"); dialog.x = event.pageX - parseInt(dialog.frame.css("left"), 10); dialog.y = event.pageY - parseInt(dialog.frame.css("top"), 10); dialog.frame.fadeTo(20, 0.5);//點選後開始拖動並透明 }).on('mouseout', function () { dialog.mousekey = false; dialog.top.css("cursor", "default"); dialog.frame.fadeTo("fast", 1);//鬆開滑鼠後停止移動並恢復成不透明 }); $(document).on('mousemove', function (e) { if (dialog.mousekey) { dialog.frame.css({ top: e.pageY - dialog.y, left: e.pageX - dialog.x }); } }).on('mouseup', function () { dialog.mousekey = false; dialog.top.css("cursor", "default"); dialog.frame.fadeTo("fast", 1);//鬆開滑鼠後停止移動並恢復成不透明 }); } return dialog; } } /* * 關閉彈出框的方法 * serial: 關閉的彈出框內部物件編號 * Example: $(document.body).ClosePopDialog(1); */ $.fn.ClosePopDialog = function () { var id = $(this).attr('popIdx'); $('[id^="' + id + '_"]').remove(); }; /* * 根據url取得內容並彈出框顯示的方法 * url: 需要顯示的內容的url * title: 標題 * popDialogConfig: 自定義樣式 * Example: $(document.body).PopDialogByUrl("/home/login", "Test Url", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 }); */ $.fn.PopDialogByUrl = function (url, title, popDialogConfig) { var obj = $(this); if (url) { $.ajax({ url: url, cache: false, success: function (result) { if (result == "[]" || result == "") { result = "系統忙,請稍後再試!"; } return PopDialog.show(obj, result, title, popDialogConfig); }, error: function (result) { if (result == "[]" || result == "") { result = "系統錯誤,請聯絡管理員!"; } return PopDialog.show(obj, result, title, popDialogConfig); } }); } }; /* * 彈出框顯示提供的內容的方法 * content: 需要顯示的內容 * title: 標題 * popDialogConfig: 自定義樣式 * Example: $(document.body).PopDialogByContent("<div>這是一個彈出框的例子!</div>", "Test Content", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 }); */ $.fn.PopDialogByContent = function (content, title, popDialogConfig) { return PopDialog.show($(this), content, title, popDialogConfig); }; })(jQuery);