global_popup.js

/**
 * 
 * @param {String} qrcode 二维码
 * @param {String} wx wx号
 * @param {Number} type  1:少儿 2:成人&通用  3 sem通用
 * @param {String} locationHref  默认false不跳
 * @param {String} PopupBackground img图背景
 * @param {String} toplength 传一些想要改动的值
 */
 var propsLocationHref
 function registerAfterPopup(
	 qrcode = 'http://acadsoc-development-oss.acadsoc.com.cn/landing-page/files/2020/09/16/6mhnrcfx2mn2dwt8f2ba7yrkh49z6be4.png',
	 wx = 'Aliceabc-Eva',
	 type = 1,
	 locationHref = false,
	 PopupBackground = 'http://acadsoc-development-oss.acadsoc.com.cn/landing-page/files/2020/09/17/a2z9k4c1d5gjat5eaphmfz7jzdh4z1dm.png',
	 toplength = '25'
 ) {
	 propsLocationHref = locationHref
		
	 
   const codes = {
	 1: `<style>
	 .render-jsx-27-undefined{
	   z-index:10000;
	 }
	 /* PC端 */
	 @media (min-width:769px) {
	   .render-jsx-27-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-27-undefined img {vertical-align: initial;}
	   .render-jsx-27-undefined {  background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	   .render-jsx-27-undefined>.content {  margin: 0 auto 0 auto ; width: 400px; position: relative; height: auto; }
	   .render-jsx-27-undefined>.content>.bg-img {  width: 100%; }
	   .render-jsx-27-undefined>.content>.close-img-20-1 {  top: 12%; width: 12px; position: absolute; right: 30px; height: 12px; }
	   .render-jsx-27-undefined>.content>.qrcode-img {  border-radius: ; margin: 0 auto ; top: 25.5%; width: 45%; position: absolute; right: 9%; }
	   .render-jsx-27-undefined>.content>.wx {  margin:0; color: #172C79; top: 54%; left: 0; width: 100%; font-size: 14px; position: absolute; text-align: center; }
	   .render-jsx-27-undefined>.content>.btn-img {  transform: translateX(-50%); top: 52%; left: 50%; width: 100%; position: absolute; }
	 }
	 /* 手机端 */
	 @media (max-width:768px) {
	   .render-jsx-27-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-27-undefined img {vertical-align: initial;}
	   .render-jsx-27-undefined {   background-color:rgba(0,0,0,0.5) ;  top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	   .render-jsx-27-undefined>.content {  margin: 0 auto 0 auto ; width: 80%; position: relative; height: auto; }
	   .render-jsx-27-undefined>.content>.bg-img {  width: 100%;height:auto; }
	   .render-jsx-27-undefined>.content>.close-img-20-1 {  top: 12%; width: 12px; position: absolute; right: 30px; height: 12px; }
	   .render-jsx-27-undefined>.content>.qrcode-img {  border-radius: ; margin: 0 auto ; top: 25.5%; width: 45%; position: absolute; right: 9%; }
	   .render-jsx-27-undefined>.content>.wx { margin:0; color: #172C79; top: 54%; left: 5%; width: 90%; font-size: 12px; position: absolute; text-align: center; }
	   .render-jsx-27-undefined>.content>.btn-img {  transform: translateX(-50%); top: 52%; left: 50%; width: 100%; position: absolute; }
	 }
	 </style>
	 
	 <div class="render-jsx-27-undefined" id="success-popup-27" style="display:none;">
	   <div class="content">
		 <img class="bg-img" src="http://acadsoc-development-oss.acadsoc.com.cn/landing-page/files/2020/09/16/bd9y6f2rtamab72dmb9w82tfzxg9m58t.png" />
		 <img class="close-img-20-1 close-img-success" onclick="closeAfterPopup()" src="https://img.acadsoc.com.cn/web/lps/lp2019/lp-LHY/img/close-btn.png" />
		 <img class="qrcode-img" src="${qrcode}" />
		 <p class="wx">添加老师，优先安排试课，微信号：${wx}</p>
		 <img class="btn-img to-wx" data-wx="${wx}" src="https://img.acadsoc.com.cn/web/popup/cr-btn.gif" />
	   </div>
	 </div>`,
	 2: ` <style>
 
	 .render-jsx-23-undefined{
	   z-index:10000;
	 }
	 /* PC端 */
	 @media (min-width:769px) {
	   .render-jsx-23-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-23-undefined img {vertical-align: initial;}
	 .render-jsx-23-undefined {   background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	 .render-jsx-23-undefined>.content {  margin: 0 auto 0 auto ; width: 400px; position: relative; height: auto; }
	 .render-jsx-23-undefined>.content>.img {  width: 100%; }
	 .render-jsx-23-undefined>.content>.close-img-20-1 {  top: 20px; width: 12px; position: absolute; right: 30px; height: 12px; }
	 .render-jsx-23-undefined>.content>.el {  top: ${toplength}%; left: 0; width: 100%; position: absolute; text-align: center; }
	 .render-jsx-23-undefined>.content>.el>.qrcode {  border-radius: ; border: 5px solid #bc0a1d; margin: 0 auto ; width: 40%; }
	 .render-jsx-23-undefined>.content>.el>.wx {  padding: 0 0 0 0 ; margin: 2% 0 5px 0 ; color: #fff; font-size: 14px; }
	 .render-jsx-23-undefined>.content>.el>.btn-img {  margin: -13% 0 0 0 ; width: 100%; }
   
	 }
	 /* 手机端 */
	 @media (max-width:768px) {
	   .render-jsx-23-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-23-undefined img {vertical-align: initial;}
	 .render-jsx-23-undefined {   background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	 .render-jsx-23-undefined>.content {  margin: 0 auto 0 auto ; width: 80%; position: relative; height: auto; }
	 .render-jsx-23-undefined>.content>.img {  width: 100%; }
	 .render-jsx-23-undefined>.content>.close-img-20-1 {  top: 20px; width: 12px; position: absolute; right: 8%; height: 12px; }
	 .render-jsx-23-undefined>.content>.el {  top: ${toplength}%; left: 0; width: 100%; position: absolute; text-align: center; }
	 .render-jsx-23-undefined>.content>.el>.qrcode {  border-radius: ; border: 5px solid #bc0a1d; margin: 0 auto; width: 40%; }
	 .render-jsx-23-undefined>.content>.el>.wx {  padding: 0 0 0 0 ; margin: 2% 0 5px 0 ; color: #fff; font-size: 14px; }
	 .render-jsx-23-undefined>.content>.el>.btn-img {  margin: -13% 0 0 0 ; width: 100%; }
   
	 }
   </style>
   
   <div class="render-jsx-23-undefined" id="success-popup-23" style="display:none;">
	 <div class="content">
   
	   <img class="img" src="${PopupBackground}" />
	   <img class="close-img-20-1 close-img-success"
		 onclick="closeAfterPopup()"
		 src="https://img.acadsoc.com.cn/web/lps/lp2019/lp-LHY/img/close-btn.png" />
	   <div class="el">
		 <img class="qrcode" src="${qrcode}" />
		 <p class="wx">微信号：${wx}</p>
		 <img class="btn-img" src="https://img.acadsoc.com.cn/web/popup/sher-btn.gif" data-wx="${wx}" />
	   </div>
	 </div>
   `,
	 3: `<style>
		.mask-success-x {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:100000000;}
		 .mask-success-x>*{box-sizing: border-box;}
		 .mask-wrapper-x {width:400px;height:515px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:auto;padding: 0;border-radius: 0;background:url(https://img.acadsoc.com.cn/web/lps/sem/qrcode/img/bg.png)no-repeat center top;background-size:100% auto;text-align:center;}
		 .mask-wrapper-x .mask-success-close {display:block;width:40px;height:40px;position:absolute;bottom:-60px;right:0;left:0;top: auto;margin:auto;background:url(https://img.acadsoc.com.cn/web/lps/sem/qrcode/img/close.png)no-repeat center top;z-index:5;background-size:contain;}
		 .mask-wrapper-x .mask-success-img {display:block;width:150px;height:150px;margin:140px auto 20px;border:3px solid rgba(225,201,159);}
		 .mask-wrapper-x .mask-success-msg {width:100%;margin:0 auto 20px;font-size:17px;color:#666;line-height:1.6;}
		 .mask-wrapper-x .mask-success-msg strong {font-weight:600;}
		 .mask-wrapper-x .mask-success-msg strong span {color:#b71d25;}
		 .mask-wrapper-x .mask-success-msg span {color:#b71d25;}
		 .mask-wrapper-x .mask-success-copy {display:block;width:70%;line-height:55px;margin:0 auto;font-size:22px;color:#fff;background:#1b2d78;border-radius:50px;cursor: pointer;}
		 @media(max-width:767px) {
		 .mask-wrapper-x {width:280px;height:360px;}
		 .mask-wrapper-x .mask-success-close {width:27.5px;height:27.5px;bottom: -45px;}
		 .mask-wrapper-x .mask-success-img {width:100px;height:100px;margin:95px auto 15px;border:2.5px solid rgba(225,201,159);}
		 .mask-wrapper-x .mask-success-msg {margin:0 auto 15px;font-size:12px;}
		 .mask-wrapper-x .mask-success-copy {line-height:40px;font-size:15px;}
		 }
   </style>
   
   <div class="mask-success-x" id="success-popup-25" style="display:none;">
	 <div class="mask-wrapper-x">
	   <img src="${qrcode}" alt="" class="mask-success-img">
	   <div class="mask-success-msg">
		 添加微信（请备注手机号）加入学员知识互动社群<br>
		 <strong>更有<span>外教课/现金红包</span>双重好礼等你来拿！</strong><br>
		 微信号：<span class="mask-success-qrcode" id="qrCodex">${wx}</span>
	   </div>
	   <div class="mask-success-copy" data-wx="${wx}">
		 复制微信号
	   </div>
	   <i class="mask-success-close" onclick="closeAfterPopup()"></i>
	 </div>
	 </div>`,
   5: ` <style>
 
   .render-jsx-23-undefined{
	 z-index:10000;
   }
   /* PC端 */
   @media (min-width:769px) {
	 .render-jsx-23-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	 .render-jsx-23-undefined img {vertical-align: initial;}
   .render-jsx-23-undefined {   background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
   .render-jsx-23-undefined>.content {  margin: 0 auto; width: 600px; position: relative; height: auto; }
   .render-jsx-23-undefined>.content>.img {  width: 100%; }
   .render-jsx-23-undefined>.content>.close-img-20-1 {  bottom: -15%; width: 80px; position: absolute; left:50%; transform: translateX(-50%); height: 80px; }
   .render-jsx-23-undefined>.content>.el { height: 5rem; top: 29%; left: 0; width: 100%; position: absolute; text-align: center; }
   .render-jsx-23-undefined>.content>.el>.qrcode { width:150px;height:150px;position: absolute;right: 15%;top:5%; display: unset; border-radius: 5px;  margin: 0 auto ;}
   .render-jsx-23-undefined>.content>.el .wx { text-align: left;  margin: 1% 0 5px 0 ; color: #999999; font-size: 24px; }
   .render-jsx-23-undefined>.content>.el .btn-img {  display: block;border: 1px solid #cc122d;font-size: 24px;color:#cc122d;border-radius: 50px; text-align: center;line-height:40px;width: 150px;height:40px ; }
   .render-jsx-23-undefined>.content>.el>.title {line-height: 1.2;background-image: none;font-weight: 100;width: 100%; padding: 0 0 0 0 ;   margin: 230px 0 5px 0; color: #999999;font-size: 24px; }	
   .render-jsx-23-undefined .titleTop {line-height: 1.2;width:80%; text-align: center; position: absolute;top:50px;left:50%; transform: translateX(-50%); padding: 0 0 0 0 ; margin: 1% 0 5px 0 ; color: #2d39c9; font-size: 28px; font-weight: bold;}	
   .render-jsx-23-undefined>.content>.el>.wxBox{display:flex;justify-content: space-between;width:75%;margin:25px auto 0;}
 }
   
   /* 手机端 */
   @media (max-width:768px) {
	 .render-jsx-23-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	 .render-jsx-23-undefined img {vertical-align: initial;}
   .render-jsx-23-undefined {   background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
   .render-jsx-23-undefined>.content {  margin: 0 auto ; width: 95%; position: relative; height: auto; }
   .render-jsx-23-undefined>.content>.img {  width: 100%; }
   .render-jsx-23-undefined>.content>.close-img-20-1 {  bottom: -15%; width: 45px; position: absolute; left:50%; transform: translateX(-50%); height: 45px; }
   .render-jsx-23-undefined>.content>.el {  top: 29%; left: 0; width: 100%; position: absolute; text-align: center; }
   .render-jsx-23-undefined>.content>.el>.qrcode { width:110px;height:110px;position: absolute;right: 15%;top:2%; display: unset; border-radius: 10px; margin: 0 auto ;}
   .render-jsx-23-undefined>.content>.el .wx { text-align: left;  margin: 1% 0 5px 0 ; color: #999999; font-size: 16px; }
   .render-jsx-23-undefined>.content>.el .btn-img {  display: block;border: 1px solid #cc122d;font-size: 16px;color:#cc122d;border-radius: 50px; text-align: center;line-height: 25px;width: 90px;height:25px ; }
   .render-jsx-23-undefined>.content>.el>.title {line-height: 1.2;background-image: none;font-weight: 100;width: 100%; padding: 0 0 0 0 ; margin: 150px 0 5px 0 ; color: #999999;font-size: 16px; }	
   .render-jsx-23-undefined .titleTop {line-height: 1.2;width:80%; text-align: center; position: absolute;top:28px;left:50%; transform: translateX(-50%); padding: 0 0 0 0 ; margin: 1% 0 5px 0 ; color: #2d39c9; font-size: 18px; font-weight: bold;}	
   .render-jsx-23-undefined>.content>.el>.wxBox{display:flex;justify-content: space-between;width:75%;margin:15px auto 0;}
 }
 </style>
 
 <div class="render-jsx-23-undefined" id="success-popup-23" style="display:none;">
   <div class="content">
	   
   <p class="titleTop">添加老师微信优先约课,体验完<br>&nbsp;免费领取实体书籍（五选一）</p>
	 <img class="img" src="https://img.acadsoc.com.cn/web/lps/acc/bd/ty/img/ewmBg.png" />
	 <img class="close-img-20-1 close-img-success"
	   onclick="closeAfterPopup()"
	   src="https://img.acadsoc.com.cn/web/lps/acc/bd/ty/img/close.png" />
	 <div class="el">
	   <img class="qrcode" src="${qrcode}" />
	   <p class="title">截图保存扫码或者搜索微信号  <br>
	   限时领取全英书籍（成人/少儿均适用）</p>
	   <div class="wxBox">
	   <p class="wx">微信号：${wx}</p>
	   <p class="btn-img" data-wx="${wx}">点击复制</p></div>
	 </div>
   </div>
 `,
	   6: `<style>
	 .render-jsx-27-undefined{
	   z-index:10000;
	 }
	 .render-jsx-27-undefined .title-pp{
		 color: #4E4D4D;
		 font-size:24px;
		 position: absolute;
		 width:100%;
		 text-align:center;
		 top:11%;
	 }
	 /* PC端 */
	 @media (min-width:769px) {
	   .render-jsx-27-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-27-undefined img {vertical-align: initial;}
	   .render-jsx-27-undefined {  background-color:rgba(0,0,0,0.5) ; top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	   .render-jsx-27-undefined>.content {  margin: 0 auto 0 auto ; width: 400px; position: relative; height: auto; }
	   .render-jsx-27-undefined>.content>.bg-img {  width: 100%; }
	   .render-jsx-27-undefined>.content>.close-img-20-1 {  top: 6%; width: 12px; position: absolute; right: 30px; height: 12px; }
	   .render-jsx-27-undefined>.content>.qrcode-img {  border-radius: ; left:0;right: 0;margin:auto ; top: 18.5%; width: 45%; position: absolute;border: 1px solid #E0C093; }
	   .render-jsx-27-undefined>.content>.wx {  margin:0; color: #fff; top: 65%; left: 0; width: 100%; font-size: 16px; position: absolute; text-align: center;line-height: 22px; }
		 .render-jsx-27-undefined>.content>.wx span{color:#F3CC00;font-size: 16px; }
	   .render-jsx-27-undefined>.content>.btn-img {  transform: translateX(-50%); top: 82%; left: 50%; width: 80%; position: absolute; background: #F3CC00;font-size:18px;color: #893D13;text-align: center;line-height: 2.2;border-radius: 40px;font-weight: bold;}
	 }
	 /* 手机端 */
	 @media (max-width:768px) {
	   .render-jsx-27-undefined * {box-sizing: border-box; line-height:1;margin:0;padding:0;border:0;font-size:0;}
	   .render-jsx-27-undefined img {vertical-align: initial;}
	   .render-jsx-27-undefined {   background-color:rgba(0,0,0,0.5) ;  top: 0; left: 0; bottom: 0; display: flex; justify-content: center; position: fixed; right: 0; align-items: center; }
	   .render-jsx-27-undefined>.content {  margin: 0 auto 0 auto ; width: 80%; position: relative; height: auto; }
	   .render-jsx-27-undefined>.content>.bg-img {  width: 100%;height:auto; }
	   .render-jsx-27-undefined>.content>.close-img-20-1 {  top: 6%; width: 12px; position: absolute; right: 8%; height: 12px; }
	   .render-jsx-27-undefined>.content>.qrcode-img {  border-radius:8px ; left:0;right: 0;margin:auto ; top: 19.5%; width: 45%; position: absolute; border: 1px solid #E0C093; }
	   .render-jsx-27-undefined>.content>.wx { margin:0; color: #fff; top: 65%; left: 5%; width: 90%; font-size: 12px; position: absolute; text-align: center;line-height: 18px; }
	   .render-jsx-27-undefined>.content>.wx span{color:#F3CC00;font-size: 12px; }
	   .render-jsx-27-undefined>.content>.btn-img {  transform: translateX(-50%); top: 82%; left: 50%; width: 80%;height:10%; position: absolute;background: #F3CC00;font-size:18px;color: #893D13;text-align: center;line-height: 2.2;border-radius: 40px;font-weight: bold;}
		 .render-jsx-27-undefined .title-pp{font-size:18px;
		 }
	 }
	 </style>
	 
	 <div class="render-jsx-27-undefined" id="success-popup-27" style="display:none;">
	   <div class="content">
		 <p class="title-pp">您已成功注册</p>
		 <img class="bg-img" src="https://img.acadsoc.com.cn/img/popup-bg/6pc.png" />
		 <img class="close-img-20-1 close-img-success" onclick="closeAfterPopup()" src="https://img.acadsoc.com.cn/web/lps/lp2019/lp-LHY/img/close-btn.png" />
		 <img class="qrcode-img" src="${qrcode}" />
		 <p class="wx">扫码添加微信（预约外教课）加入5天训练营<br/>更有<span>课程礼包/现金红包</span>双重好礼等你来拿！<br/>微信号：${wx}</p>
		 <a class="btn-img to-wx" data-wx="${wx}">复制微信号</a>
	   </div>
	 </div>`,
 
   };
 
   const script = `
   <script>
   $(function(){
	 
	 $('[data-wx]').click(function(){
	   const element = document.createElement('input');
	   element.value = $(this).attr('data-wx');
	   document.body.append(element);
	   element.select();
	   document.execCommand('Copy'); // 原生copy方法执行浏览器复制命令
	   document.body.removeChild(element);
	   alert('复制成功,去微信添加好友!');
	   const aele = document.createElement('a');
	   aele.click();
	   window.location = 'weixin://'
	 });
 
   })
   </script>
   `;
 
   $(function () {
	 $('body').append(codes[type] + '\n' + script);
   })
 }
 
 
 
 function closeAfterPopup() {
	 $('[id^=success-popup]').hide();
	 if (propsLocationHref) {
		 window.location = propsLocationHref
	 }
 }
 
 function showAfterPopup() {
   $('[id^=success-popup]').show();
 }