1月会员日 集人气【弹窗】

/*彈窗*/
.Dialogbg{  background-color: #000;  height: 100%;  left: 0;  opacity: 0.7;  position: fixed;  top: 0;  width: 100%; z-index: 200; display: none;-moz-opacity:.7;filter:alpha(opacity=70); }

.DialogBox{  box-shadow: 0 0 0 #999;  font-size:px2rem(14);  width:px2rem(600); height:auto !important; padding:px2rem(1); top: 50%; left: 50%;  margin:px2rem(-300) auto 0 px2rem(-300) !important;  position: fixed; z-index: 99999; display: none;
  .closes{ width:px2rem(50); height:px2rem(50); position: absolute; top:px2rem(30); right:px2rem(40); cursor: pointer; z-index: 8; background: url("../images/close2.png") no-repeat; background-size: 100%;}
  .quan{position: relative; padding:0; border-radius:px2rem(10); overflow: hidden;
    img{margin: 0 auto; width: 100%;}
    .txt{ width:px2rem(400); position: absolute; text-align: center; top:px2rem(140); left: 50%; margin-left:px2rem(-200); letter-spacing: px2rem(3); vertical-align: baseline !important;
      h2{font-size:px2rem(24); color: #83481b; line-height:px2rem(50);}
      span{ vertical-align: baseline !important; }
      p{font-size:px2rem(24); line-height:px2rem(40); color: #8d0d0a; vertical-align: baseline !important;
        span{font-weight: bold;}
      }
      .go-use{display: block; width:px2rem(180); margin:px2rem(30) auto; line-height:px2rem(43); cursor: pointer; background: #a80600; color: #fae4c5; border-radius:px2rem(43); text-align: center; font-size:px2rem(24);
      }
    }

  }
  .quan-2{
    .go-use{bottom: px2rem(100);}
  }
}

 

function Dialog(bg,els,opts,n,money) {
    this.$Dialog = $(els);
    this.$Dialogbg = $(bg);
    this.$close = this.$Dialog.find(opts.close);
    this.$btn = this.$Dialog.find(opts.btn);
    this.n = n;
    this.money = money;
    this._init();
}
Dialog.prototype={
    _init:function () {
        var self = this;
        this.show();
        this.$Dialogbg.click(function () {
            self.hide();
        });
        this.$close.click(function () {
            self.hide();
        });
        this.$btn.click(function () {
            self.hide();
        });
    },
    show:function () {
        console.log(this.max);
        this.$Dialogbg.fadeIn(300);
        this.$Dialog.fadeIn(300);
        this.$Dialog.find(".hb").text(this.money);
        this.$Dialog.find(".quan-"+this.n).fadeIn(300).siblings().not(".closes").hide();
    },
    hide:function () {
        this.$Dialogbg.fadeOut(300);
        this.$Dialog.fadeOut(300);
    }
};

new Dialog(".Dialogbg",'.DialogBox',{
            close:'.closes',
            btn:'.go-use'
},1,10);

 

 

posted @ 2019-12-23 15:08  Shimily  阅读(70)  评论(0)    收藏  举报