function loginRegister(id){
    this.$modalBtn = $("#"+id);
}
loginRegister.prototype.getFormDatat = function(_this){
    let formData = {};
    $("#modal-skew-from-left .swiper_type_form input").each(function(index,elem) {
        let name = $(elem).attr("name");
        let value = $(elem).val();
        formData[name] = value;
    });
    return formData;
}
loginRegister.prototype.initEvent = function(){
    let _this = this;
    this.initLoginRegister();
    $("#login_box").submit(function(e){
        event.preventDefault();
        console.log(_this.getFormDatat(this));
        _this.closeModal();
    });
    this.$modalBtn.click(function(){
        _this.showLoginRegister();
    });
    $('.modal-background,.close_btn').on('click', function(e) {
        e.preventDefault();
        _this.closeModal();
    });
}
loginRegister.prototype.showLoginRegister = function(){
    $('.modal-background').addClass('show');
    $('#modal-skew-from-left').addClass('show');
    // $("body").css("position","fixed");
}
loginRegister.prototype.closeModal = function(){
    $('.modal-background').removeClass('show');
    $('.modal_box.show').removeClass('show');
    // $("body").css("position","inherit");
}
loginRegister.prototype.initLoginRegister = function() {
    if ($("#modal-skew-from-left").length < 1) {
        $("body").append(`
					<style>
						.clearfix:after {content:"";display:block;height:0;clear:both;}
						.clearfix {zoom:1;}
						#modal-skew-from-left {top: 40%;left: 0;transform: skewX(40deg) translate(-200%, -50%);transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
						#modal-skew-from-left.show {left: 50%;transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);transform: translate(-50%, -50%);}
						.modal-background {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 98;pointer-events: none;display: none;}
						.modal-background.show {display: block;opacity: 1;pointer-events: auto;animation: fadein 0.8s;}
						.modal-background.hide {animation: fadeout 0.8s;}
						@keyframes fadein {from {opacity: 0;}to {opacity: 1;}}
						@keyframes fadeout {from {opacity: 1;}to {opacity: 0;}}
						.modal_box {position: fixed;padding-bottom: 15px;box-shadow: 0px 0px 5px 0px #fff;background:url(https://images.bobobaike.com/imagesnewgame/back.png) no-repeat center center;
						background-size:cover; color: #fff;transform-style: preserve-3d;border-radius: 5px;z-index: 999;width: 430px;height:242px;}
						.modal_box h3{margin: 20px 0;color: #2D7AE4;font-size: 20px;font-weight: bold;text-align: center;text-indent:10px;line-height: 40px;position: relative;}
						.modal_box h3 span{position:absolute;width:20px;height:20px;background:url(https://images.bobobaike.com/imagesnewgame/close_bobo.png) no-repeat center center;
						background-size:cover;right:15px;}
						.modal_box h3 span:hover{cursor:pointer;}
						.modal_box .form_box{padding:0 15px;}
						.modal_box .form_box p{color:#999;font-size:12px;text-align: center;margin:15px 0;}
						.modal_box .form_box p span{color:#2D7AE4;}
						.modal_box .form_box div input{color: #333;height: 36px;line-height:36px;font-size: 14px;width: 100%;padding: 0px 15px;box-sizing: border-box;border: 1px solid #ddd;border-radius: 8px;}
						.modal_box .form_box div input:focus{outline:none;}
						.modal_box .form_box .btn_item{margin-top:15px;text-align: center;}
						.modal_box .form_box  button{margin-top: 20px;font-size: 16px;height: 44px;border: none;line-height: 44px;text-align: center;width: 90%;color: #fff;border-radius: 5px;}
						.modal_box .form_box  button:hover{cursor:pointer;}
						.modal_box .form_box .btn_item .sure{background-color: #2D7AE4;color: #fff;}
					</style>
					<div id="modal-skew-from-left" class="modal_box">
						<h3 class="type_list active">游戏预约提醒 <span class="close_btn"></span></h3>
						<div class="swiper_type swiper_type_form">
							<div class="type_list active">
								<form class="form_box" id="login_box"  action="" method="get">
									<div><input name="phone" placeholder="请填写你的手机号码" type="text" ></div>
									<p>游戏正式上线前我们将通过<span>免费预约短信</span>提醒您</p>
									<div class="btn_item clearfix">
										<button class="sure" type="submit">立即预约</button>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="modal-background"></div>
				`);
    }
}
let loginRegisterClass = new loginRegister("appointment_btn");
loginRegisterClass.initEvent();