弹出层控件popup


var popup = new Popup(4);
popup.contentHtml(
    '' +
    '
' + ' '/resources/images/view/s_4.png"/>' + '

亲,您还没有编辑完您的作品哦 !请丰富您的作品内容后再下单吧 ^_^

'
+ '
'
+ '
'
); popup.titleContent("友情提示"); popup.okWebEvent = function () { _selfPop.distory(); } popup.cancelWebEvent = function () { _selfPop.distory(); } popup.setContentClass("cont tsy"); popup.show();


下面是封装的包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 {

}

你可能感兴趣的:(弹出层控件popup)