var popup = new Popup(4); popup.contentHtml( '' + '' + '' ); popup.titleContent("友情提示"); popup.okWebEvent = function () { _selfPop.distory(); } popup.cancelWebEvent = function () { _selfPop.distory(); } popup.setContentClass("cont tsy"); popup.show();'/resources/images/view/s_4.png"/>' + ' 亲,您还没有编辑完您的作品哦 !请丰富您的作品内容后再下单吧 ^_^ ' + ' ' + '
下面是封装的包popup.js
var _selfPop; var Popup = function(type) { this.popUpMask = null; // 遮罩层 this.popmask = null; // 弹出层 this.popupDiv = null; // 内容层 this.contentDiv = null; // 标题内容标签 this.titleEl = null; // 确定按钮 this.okBtn = null; // 取消按钮 this.cancelBtn = null; this.closeA = null;// 关闭按钮 this.closeHtml = ""; this.okHtml = "";// ok内容 this.cancelHtml = "";// cancle内容 this.contentDivHeight = ""; // 标题内容 this.title = ""; // 内容 内容 this.content = ""; this.okWebEvent = null; this.closeWebEvent = null; // 判断是哪种类型的提示信息 if (type == "1") { this.createAlert(); } else if (type == "2") { this.createshare();// 分享遮罩图片 } else if (type == '3') { this.createThreeBtn(); } else if(type=='4') { this.createOneBtn(); } else{ this.create(); } _selfPop = this; } Popup.prototype = { /** * 显示 */ show : function() { if (this.popmask) this.popmask.show(); if (this.popupDiv) this.popupDiv.show(); if (this.popUpMask) this.popUpMask.show(); }, /** * 隐藏 */ hide : function() { this.popupDiv.hide(); this.popmask.hide(); this.popUpMask.hide(); }, /** * 创建 */ create : function() { this.popUpMask = $(""); this.popmask = $(""); this.popmask.hide(); this.popupDiv = $("" + ""); this.popupDiv.hide(); this.titleEl = $(""); this.contentDiv = $(""); this.popupDiv.append(this.titleEl); this.popupDiv.append(this.contentDiv); var buttonsDiv = $("") this.popupDiv.append(buttonsDiv); this.cancelBtn = $(""); this.okBtn = $(""); var clear = $(""); this.okBtn.on("click", this.okEvent); this.cancelBtn.on("click", this.cancelEvent); buttonsDiv.append(this.cancelBtn); buttonsDiv.append(this.okBtn); buttonsDiv.append(clear); this.popUpMask.append(this.popmask); this.popUpMask.append(this.popupDiv); $(document.body).append(this.popUpMask); }, createOneBtn : function() { this.popUpMask = $(""); this.popmask = $(""); this.popmask.hide(); this.popupDiv = $("" + "
" + ""); this.popupDiv.hide(); this.titleEl = $(""); this.contentDiv = $(""); this.popupDiv.append(this.titleEl); this.popupDiv.append(this.contentDiv); var buttonsDiv = $("") this.popupDiv.append(buttonsDiv); this.okBtn = $(""); var clear = $(""); this.okBtn.on("click", this.okEvent); buttonsDiv.append(this.okBtn); buttonsDiv.append(clear); this.popUpMask.append(this.popmask); this.popUpMask.append(this.popupDiv); $(document.body).append(this.popUpMask); }, createThreeBtn : function() { this.popUpMask = $(""); this.popmask = $(""); this.popmask.hide(); this.popupDiv = $("" + "
" + ""); this.popupDiv.hide(); this.titleEl = $(""); this.contentDiv = $(""); this.closeA = $('" + "
'/resources/images/view/close_1.png" />'); this.closeA.on("click", this.closeEvent); this.popupDiv.append(this.closeA); this.popupDiv.append(this.titleEl); this.popupDiv.append(this.contentDiv); var buttonsDiv = $("") this.popupDiv.append(buttonsDiv); this.cancelBtn = $(""); this.okBtn = $(""); var clear = $(""); this.okBtn.on("click", this.okEvent); this.cancelBtn.on("click", this.cancelEvent); buttonsDiv.append(this.cancelBtn); buttonsDiv.append(this.okBtn); buttonsDiv.append(clear); this.popUpMask.append(this.popmask); this.popUpMask.append(this.popupDiv); $(document.body).append(this.popUpMask); }, /** * 创建 */ createAlert : function() { this.popUpMask = $(""); this.popmask = $(""); this.popmask.hide(); this.popupDiv = $("
" + ""); this.popupDiv.hide(); this.titleEl = $(""); if (this.contentDivHeight == "") { this.contentDiv = $(""); } else { this.contentDiv = $(""); } this.popupDiv.append(this.titleEl); this.popupDiv.append(this.contentDiv); var buttonsDiv = $("") this.popupDiv.append(buttonsDiv); this.okBtn = $(""); var clear = $(""); this.okBtn.on("click", this.okEvent); buttonsDiv.append(this.okBtn); buttonsDiv.append(clear); this.popUpMask.append(this.popmask); this.popUpMask.append(this.popupDiv); $(document.body).append(this.popUpMask); }, createshare : function() { this.popUpMask = $(""); this.popmask = $(""); this.popmask.hide(); this.contentDiv = $(''); this.popUpMask.append(this.popmask); this.popUpMask.append(this.contentDiv); $(document.body).append(this.popUpMask); }, /** * 清除 */ distory : function() { if (this.popmask) this.popmask.remove(); if (this.popupDiv) this.popupDiv.remove(); if (this.popUpMask) this.popUpMask.remove(); }, /** * 弹出层内容 */ contentHtml : function(html) { this.content = html; this.contentDiv.html(html); }, setContentClass : function(c) { this.contentDiv.attr("class", c); }, titleContent : function(title) { this.title = title; this.titleEl.html(title); }, okContent : function(okHtml) { this.okHtml = okHtml; this.okBtn.html(okHtml); }, cancelContent : function(cancelHtml) { this.cancelHtml = cancelHtml; this.cancelBtn.html(cancelHtml); }, contentDivHeightContent : function(contentDivHeight) { this.contentDivHeight = contentDivHeight; this.contentDiv.css('height', contentDivHeight); }, /** * 确认事件 */ okEvent : function() { if (null != _selfPop.okWebEvent) { _selfPop.okWebEvent(); } _selfPop.hide(); }, closeEvent : function() { if (null != _selfPop.closeWebEvent) { _selfPop.closeWebEvent(); } _selfPop.hide(); }, /** * 取消事件 */ cancelEvent : function() { if (null != _selfPop.cancelWebEvent) { _selfPop.cancelWebEvent(); } _selfPop.hide(); } }" + "
/*弹层*/ .popup_mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 20002; } .mask { width: 100%; height: 100%; background-color: #000; opacity: 0.8; position: absolute; top: 0; left: 0; z-index: 20003; } .popup { width: 86%; height: auto; background-color: #fff; border-radius: 10px; position: absolute; top: 40px; left: 50%; margin-left: -43%; z-index: 20004; overflow-x: hidden; } .popup .titlebg { width: 100%; height: auto; position: absolute; z-index: 30; display: none; } .popup h1 { width: 100%; height: auto; line-height: 45px; padding-bottom: 10px; padding-left: 7%; position: relative; left: 0; top: 0; z-index: 31; background: #ec438d url(../images/tc_bg.png) 0 bottom repeat-x; background-size: auto 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .popup a.close { width: 25px; height: auto; position: absolute; z-index: 32; right: 18px; top: 14px; display: block; } .popup a.close img { width: 100%; } .popup .cont { width: 90%; height: auto; min-height: 40px; max-height: 280px; margin: 15px auto; overflow-x: hidden; overflow-y: auto; } .popup .txtbj textarea { width: 91%; max-width: 91%; height: 90px; max-height: 90px; background-color: #fff; border: 1px #ddd solid; padding: 10px; margin: 0 auto 10px; overflow: hidden; font-size: 14px; color: #999; line-height: 30px; resize: none; } .popup .zpxq { text-align: center; overflow: hidden; } .popup .zpxq img { width: 70%; height: auto; margin: 0 auto 20px; } .popup .zpxq .title { width: 97%; height: 25px; line-height: 25px; background-color: #eb448c; padding-left: 3%; margin-bottom: 5px; color: #fff; text-align: left; } .popup .zpxq .dv_scroll_main { height: 100px; } .popup .zpxq ul { width: 95%; height: auto; } .popup .zpxq li { height: auto; line-height: 25px; border-bottom: 1px #ddd dashed; text-align: left; } .popup .zpxq li time { width: 30%; float: left; margin-left: 2%; } .popup .zpxq li p { width: 60%; float: left; margin-left: 3%; } .popup .tsy .qrxx, .popup .tsy .yqts { width: 100%; height: auto; line-height: 25px; margin-bottom: 5px; } .popup .tsy .qrxx img, .popup .tsy .yqts img { width: 9px; height: auto; float: left; margin-top: 8px; margin-right: 5px; } .popup .tsy .qrxx p, .popup .tsy .yqts p { width: 90%; height: auto; float: left; color: #666; } .popup .wlcx { text-align: left; overflow: hidden; } .popup .wlcx .top { border-bottom: 1px #ddd solid; padding-bottom: 15px; margin-bottom: 5px; } .popup .wlcx .top img { width: 55px; height: 55px; float: left; margin-left: 5px; margin-right: 5px; } .popup .wlcx .top .text { width: 70%; height: 55px; line-height: 18px; float: left; color: #999; } .popup .wlcx .title { width: 97%; height: 25px; line-height: 25px; border-bottom: 1px #ddd solid; padding-left: 3%; margin-bottom: 5px; color: #666; text-align: left; font-weight: 700; } .popup .wlcx ul { width: 95%; height: auto; } .popup .wlcx li { height: auto; line-height: 25px; border-bottom: 1px #ddd solid; text-align: left; } .popup .ztdxz .top { margin-bottom: 10px; } .popup .ztdxz .top .radio { width: 20px; height: 20px; float: left; margin-left: 5px; margin-right: 10px; } .popup .ztdxz .top .text { width: 85%; height: auto; line-height: 18px; float: left; color: #666; } .popup .ztdxz .title { width: 97%; height: 25px; line-height: 20px; border-bottom: 1px #ddd solid; padding-left: 3%; margin-bottom: 5px; margin-top: 20px; color: #666; text-align: left; font-weight: 700; } .popup .ztdxz form { } .popup .ztdxz .select_cd { float: left; margin: 10px 0.7% 15px; } .popup_help { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 20006; text-align: right; } .popup_help img { width: 100%; height: auto; margin-top: 5%; } .popup .zcxq { text-align: left; overflow: hidden; } .popup .zcxq .top { border-bottom: 1px #ddd solid; padding-bottom: 15px; margin-bottom: 0; } .popup .zcxq .top img { width: 55px; height: 55px; float: left; margin-left: 5px; margin-right: 5px; } .popup .zcxq .top .text { width: 40%; height: 55px; line-height: 18px; float: left; color: #999; } .popup .zcxq .top .button { float: right; width: 75px; height: 30px; line-height: 30px; font-size: 14px; margin-top: 25px; } .popup .zcxq .title { width: 97%; height: 35px; line-height: 35px; border-bottom: 1px #ddd solid; padding-left: 3%; color: #666; text-align: left; font-weight: 700; } .popup .zcxq ul { width: 100%; height: 230px; overflow-y: scroll; } .popup .zcxq li { width: 94%; height: auto; line-height: 25px; border-bottom: 1px #ddd solid; text-align: left; padding: 5px 3%; color: #b5b5b5; text-align: left; } .popup .zcxq li span { color: #000; } .popup .zcxq li name { width: 100%; display: block; } .popup .zcxq li message { width: 100%; clear: both; display: block; } .popup .zcxq li price { float: left; width: 50%; } .popup .zcxq li price b { color: #e84189; } .popup .zcxq li time { width: 50%; float: right; text-align: right; font-size: 12px; } .popup .zpxx_lr p { line-height: 30px; margin-bottom: 5px; } .popup .zpxx_lr name { width: 25%; text-align: right; float: left; margin-right: 10px; font-size: 14px; color: #666; } .popup .zpxx_lr input { width: 65%; text-align: left; float: left; height: 28px; line-height: 28px; border: 1px #ddd solid; } .popup .xzp_sx { }