彈出層控件popup

var popup = new Popup(4);
popup.contentHtml(
    '<!--內容確認-->' +
    '<div class="qrxx txt14">' +
    '    <img src="' + ctx + '/resources/images/view/s_4.png"/>' +
    '    <p>親，您還沒有編輯完您的作品哦 ！請豐富您的作品內容後再下單吧 ^_^ </p>' +
    '    <div class="clear"></div>' +
    '</div>'
);
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 = $("<div class='popup_mask'></div>");
      this.popmask = $("<div class='mask'></div>");
      this.popmask.hide();
      this.popupDiv = $("<div class='popup' style='background-image:"
            + ctx
            + "/resources/images/view/tc_bg.png'>"
            + "<img src='"
            + ctx
            + "/resources/images/view/tc_bg.png' width='650' height='126' class='titlebg' />"
            + "</div>");
      this.popupDiv.hide();
      this.titleEl = $("<h1></h1>");
      this.contentDiv = $("<div class='cont ztdxz'></div>");
      this.popupDiv.append(this.titleEl);
      this.popupDiv.append(this.contentDiv);
      var buttonsDiv = $("<div class='button_two'></div>")
      this.popupDiv.append(buttonsDiv);

      this.cancelBtn = $("<div class='left'><a href='javascript:void(0)' class='button button_qx'>取消</a></div>");
      this.okBtn = $("<div class='right'><a href='javascript:void(0)' class='button button_qr'>確定</a></div>");
      var clear = $("<div class='clear'></div>");
      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 = $("<div class='popup_mask'></div>");
      this.popmask = $("<div class='mask'></div>");
      this.popmask.hide();
      this.popupDiv = $("<div class='popup' style='background-image:"
         + ctx
         + "/resources/images/view/tc_bg.png'>"
         + "<img src='"
         + ctx
         + "/resources/images/view/tc_bg.png' width='650' height='126' class='titlebg' />"
         + "</div>");
      this.popupDiv.hide();
      this.titleEl = $("<h1></h1>");
      this.contentDiv = $("<div class='cont ztdxz'></div>");
      this.popupDiv.append(this.titleEl);
      this.popupDiv.append(this.contentDiv);
      var buttonsDiv = $("<div class='button_two'></div>")
      this.popupDiv.append(buttonsDiv);
      this.okBtn = $("<div class='center'><a href='javascript:void(0)' class='button button_qr'>確定</a></div>");
      var clear = $("<div class='clear'></div>");
      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 = $("<div class='popup_mask'></div>");
      this.popmask = $("<div class='mask'></div>");
      this.popmask.hide();
      this.popupDiv = $("<div class='popup' style='background-image:"
            + ctx
            + "/resources/images/view/tc_bg.png'>"
            + "<img src='"
            + ctx
            + "/resources/images/view/tc_bg.png' width='650' height='126' class='titlebg' />"
            + "</div>");
      this.popupDiv.hide();
      this.titleEl = $("<h1></h1>");
      this.contentDiv = $("<div class='cont ztdxz'></div>");
      this.closeA = $('<a class="close" href="#"><img src="' + ctx
            + '/resources/images/view/close_1.png" /></a>');
      this.closeA.on("click", this.closeEvent);
      this.popupDiv.append(this.closeA);
      this.popupDiv.append(this.titleEl);
      this.popupDiv.append(this.contentDiv);
      var buttonsDiv = $("<div class='button_two'></div>")
      this.popupDiv.append(buttonsDiv);

      this.cancelBtn = $("<div class='left'><a href='javascript:void(0)' class='button button_qx'>取消</a></div>");
      this.okBtn = $("<div class='right'><a href='javascript:void(0)' class='button button_qr'>確定</a></div>");
      var clear = $("<div class='clear'></div>");
      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 = $("<div class='popup_mask'></div>");
      this.popmask = $("<div class='mask'></div>");
      this.popmask.hide();
      this.popupDiv = $("<div class='popup' style='background-image:"
            + ctx
            + "/resources/images/view/tc_bg.png'>"
            + "<img src='"
            + ctx
            + "/resources/images/view/tc_bg.png' width='650' height='126' class='titlebg' />"
            + "</div>");
      this.popupDiv.hide();

      this.titleEl = $("<h1></h1>");
      if (this.contentDivHeight == "") {
         this.contentDiv = $("<div class='cont tsy' style=' overfllow-y:scroll; height:126px;'></div>");
      } else {
         this.contentDiv = $("<div class='cont tsy' style=' overfllow-y:scroll; height:"
               + this.contentDivHeight + ";'></div>");
      }

      this.popupDiv.append(this.titleEl);
      this.popupDiv.append(this.contentDiv);
      var buttonsDiv = $("<div class='button_two'></div>")
      this.popupDiv.append(buttonsDiv);
      this.okBtn = $("<div class='center'><a href='javascript:void(0)' class='button button_qr'>確定</a></div>");
      var clear = $("<div class='clear'></div>");
      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 = $("<div class='popup_mask'></div>");
      this.popmask = $("<div class='mask'></div>");
      this.popmask.hide();
      this.contentDiv = $('<div class="popup_help" ><a href="#" id="shareA"><img src="'
            + ctx
            + 'resources/images/weixin_share.png" width="640" height="220"></a></div>');
      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 {

}