js-自定義對話框
阿新 • • 發佈：2018-05-25
效果 hid abs cli width ces 對象 xtend 關系
引用插件
<link rel="stylesheet" type="text/css" href="${ctx }/resources/common/css/xcConfirm.css"/> <script type="text/javascript" src="${ctx }/resources/jquery-1.11.3/jquery-1.11.3.js" charset="utf-8"></script> <script type="text/javascript" src="${ctx }/resources/common/js/xcConfirm.js" charset="utf-8"></script>
對話框：點擊確定按鈕後進行回調
dataSource = function (res) { if (res) { //執行代碼 } } var res = showConfirmDialog("提示",data.msg,"0011",dataSource); //提示對話框 function showConfirmDialog(title,message,flag,dataSource) { var txt= message; var option = { title: title, btn: parseInt(flag,2),//("0001",2)-確定按鈕 ("0010",2)-取消按鈕 ("0011",2)-確定&&取消 onOk: function(){ if (dataSource != undefined && dataSource != null) dataSource("ok"); } } window.wxc.xcConfirm(txt, "custom", option); }
效果：
xcConfirm.css
/*垂直居中*/ .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; margin-left:-1px;} .xcConfirm .xc_layer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;} .xcConfirm .popBox{position: fixed; left: 50%; top: 50%; background-color: #ffffff; z-index: 2147000001; width: 570px; height: 300px; margin-left: -285px; margin-top: -150px; border-radius: 5px; font-weight: bold; color: #535e66;} .xcConfirm .popBox .ttBox{height: 50px; line-height: 30px; padding: 14px 30px; border-bottom: solid 1px #eef0f1;} .xcConfirm .popBox .ttBox .tt{font-size: 18px; display: block; float: left; height: 30px; position: relative;} .xcConfirm .popBox .ttBox .clsBtn{display: block; cursor: pointer; width: 22px; height: 22px; position: absolute; top: 22px; right: 30px; background: url(../img/close1.png) 0px 0px no-repeat;} .xcConfirm .popBox .txtBox{margin: 40px 100px; height: 100px; overflow: hidden;} .xcConfirm .popBox .txtBox .bigIcon{float: left; margin-right: 20px; width: 48px; height: 48px; background-image: url(../img/close1.png); background-repeat: no-repeat; background-position: 48px 0;} .xcConfirm .popBox .txtBox p{ height: 84px; margin-top: 16px; line-height: 26px; overflow-x: hidden; overflow-y: auto;font-size:20px;} .xcConfirm .popBox .txtBox p input{width: 364px; height: 30px; border: solid 1px #eef0f1; font-size: 18px; margin-top: 6px;} .xcConfirm .popBox .btnArea{border-top: solid 1px #eef0f1;} .xcConfirm .popBox .btnGroup{float: right;} .xcConfirm .popBox .btnGroup .sgBtn{margin-top: 14px; margin-right: 10px;} .xcConfirm .popBox .sgBtn{display: block; cursor: pointer; float: left; width: 100px; height: 50px; line-height: 50px; text-align: center; color: #FFFFFF; border-radius: 5px;font-size:18px;} .xcConfirm .popBox .sgBtn.ok{background-color: #ed4346; color: #FFFFFF;} .xcConfirm .popBox .sgBtn.cancel{background-color: #A09D9D; color: #FFFFFF;}
xcConfirm.js
/* * 使用說明: * window.wxc.Pop(popHtml, [type], [options]) * popHtml:html字符串 * type:window.wxc.xcConfirm.typeEnum集合中的元素 * options:擴展對象 * 用法: * 1. window.wxc.xcConfirm("我是彈窗<span>lalala</span>"); * 2. window.wxc.xcConfirm("成功","success"); * 3. window.wxc.xcConfirm("請輸入","input",{onOk:function(){}}) * 4. window.wxc.xcConfirm("自定義",{title:"自定義"}) */ (function($){ window.wxc = window.wxc || {}; window.wxc.xcConfirm = function(popHtml, type, options) { var btnType = window.wxc.xcConfirm.btnEnum; var eventType = window.wxc.xcConfirm.eventEnum; var popType = { info: { title: "信息", icon: "0 0",//藍色i btn: btnType.ok }, success: { title: "成功", icon: "0 -48px",//綠色對勾 btn: btnType.ok }, error: { title: "錯誤", icon: "-48px -48px",//紅色叉 btn: btnType.ok }, confirm: { title: "提示", icon: "-48px 0",//黃色問號 btn: btnType.okcancel }, warning: { title: "警告", icon: "0 -96px",//黃色嘆號 btn: btnType.okcancel }, input: { title: "輸入", icon: "", btn: btnType.ok }, custom: { title: "", icon: "", btn: btnType.ok } }; var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化輸入的參數:彈窗類型 var config = $.extend(true, { //屬性 title: "", //自定義的標題 icon: "", //圖標 btn: btnType.ok, //按鈕,默認單按鈕 //事件 onOk: $.noop,//點擊確定的按鈕回調 onCancel: $.noop,//點擊取消的按鈕回調 onClose: $.noop//彈窗關閉的回調,返回觸發事件 }, itype, options); var $txt = $("<p>").html(popHtml);//彈窗文本dom var $tt = $("<span>").addClass("tt").text(config.title);//標題 var icon = config.icon; var $icon = icon ? $("<div>").addClass("bigIcon").css("backgroundPosition",icon) : ""; var btn = config.btn;//按鈕組生成參數 var popId = creatPopId();//彈窗索引 var $box = $("<div>").addClass("xcConfirm");//彈窗插件容器 var $layer = $("<div>").addClass("xc_layer");//遮罩層 var $popBox = $("<div>").addClass("popBox");//彈窗盒子 var $ttBox = $("<div>").addClass("ttBox");//彈窗頂部區域 var $txtBox = $("<div>").addClass("txtBox");//彈窗內容主體區 var $btnArea = $("<div>").addClass("btnArea");//按鈕區域 var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("確定");//確定按鈕 var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("取消");//取消按鈕 var $input = $("<input>").addClass("inputBox");//輸入框 var $clsBtn = $("<a>").addClass("clsBtn");//關閉按鈕 //建立按鈕映射關系 var btns = { ok: $ok, cancel: $cancel }; init(); function init(){ //處理特殊類型input if(popType["input"] === itype){ $txt.append($input); } creatDom(); bind(); } function creatDom(){ $popBox.append( $ttBox.append( $clsBtn ).append( $tt ) ).append( $txtBox.append($icon).append($txt) ).append( $btnArea.append(creatBtnGroup(btn)) ); $box.attr("id", popId).append($layer).append($popBox); $("body").append($box); } function bind(){ //點擊確認按鈕 $ok.click(doOk); //回車鍵觸發確認按鈕事件 $(window).bind("keydown", function(e){ if(e.keyCode == 13) { if($("#" + popId).length == 1){ doOk(); } } }); //點擊取消按鈕 $cancel.click(doCancel); //點擊關閉按鈕 $clsBtn.click(doClose); } //確認按鈕事件 function doOk(){ var $o = $(this); var v = $.trim($input.val()); if ($input.is(":visible")) config.onOk(v); else config.onOk(); $("#" + popId).remove(); config.onClose(eventType.ok); } //取消按鈕事件 function doCancel(){ var $o = $(this); config.onCancel(); $("#" + popId).remove(); config.onClose(eventType.cancel); } //關閉按鈕事件 function doClose(){ $("#" + popId).remove(); config.onClose(eventType.close); $(window).unbind("keydown"); } //生成按鈕組 function creatBtnGroup(tp){ var $bgp = $("<div>").addClass("btnGroup"); $.each(btns, function(i, n){ if( btnType[i] == (tp & btnType[i]) ){ $bgp.append(n); } }); return $bgp; } //重生popId,防止id重復 function creatPopId(){ var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//彈窗索引 if($("#" + i).length > 0){ return creatPopId(); }else{ return i; } } }; //按鈕類型 window.wxc.xcConfirm.btnEnum = { ok: parseInt("0001",2), //確定按鈕 cancel: parseInt("0010",2), //取消按鈕 okcancel: parseInt("0011",2) //確定&&取消 }; //觸發事件類型 window.wxc.xcConfirm.eventEnum = { ok: 1, cancel: 2, close: 3 }; //彈窗類型 window.wxc.xcConfirm.typeEnum = { info: "info", success: "success", error:"error", confirm: "confirm", warning: "warning", input: "input", custom: "custom" }; })(jQuery);
js-自定義對話框