移动端弹窗插件的封装和粘贴复制分享功能
2018-03-26 本文已影响77人
幸宇
; (function (global, undefined) {
"use strict" //使用js严格模式检查，使语法更规范
var _global;
var pop = {
create: function (w, d) {
var divstr=`
<div class="pop popclose">
<div class="pop-box botp">
<h3 class="pop-title">注册成功</h3>
<div class="pop-content">
<p class="pop-text1">注册完成就去分享吧~</p>
<p class="pop-text2">静候佳音之时，可以和好友分享这一刻~</p>
<p class="pop-text3">让更多亲友来体验超值课程</p>
<div class="col-xs-12 pop-share">
<div class="col-xs-6">
<img class="img1" src="images/qq.png">
</div>
<div class="col-xs-6">
<img class="img2" src="images/wx.png" alt="">
</div>
</div>
<div class="col-xs-12 bt">
<div class="col-xs-6 qq_out">
<button class="qq" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">去QQ粘贴</button>
</div>
<div class="col-xs-6">
<button class="wx" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">去微信粘贴</button>
</div>
</div>
</div>
<span class="pop-zs">
<img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popzs.png" alt="">
</span>
<span class="pop-close">
<img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popclose.png" alt="">
</span>
</div>
<div class="pop-box botm">
<h3 class="pop-title">完成</h3>
<div class="pop-content">
<p class="text">内容已复制好了 </p>
<p class="text">快去粘贴吧~</p>
<p class="p-cont"></p>
<div class="col-xs-12 bt">
<button class="wx" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">好的</button>
</div>
</div>
<span class="pop-zs">
<img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popzs.png" alt="">
</span>
<span class="pop-close">
<img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popclose.png" alt="">
</span>
</div>
</div>
`
var cssstr=`
.popshow {
display: block
}
.popclose {
display: none
}
.pop {
z-index: 1000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background: rgba(0, 0, 0, .3)
}
.pop-box {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
width: 85%;
min-width: 240px;
max-width: 480px;
margin: auto;
height: 294px;
text-align: center;
background: #fff;
border-radius: 20px;
}
.pop-title {
margin: 0;
padding: 15px 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
font-size: 22px;
background: #f7e133;
}
.pop-text {
margin: 0;
padding: 30px 10px;
}
.pop-zs {
position: absolute;
left: 15px;
top: -16px;
}
.pop-close {
position: absolute;
right: 15px;
top: 15px;
}
.pop-zs img {
max-width: 65px;
}
.pop-close img {
max-width: 30px;
}
.pop-content button {
padding: 10px 50px;
border-radius: 20px;
border: 0;
}
.botm {
position:fixed;
bottom:0;
top:0px;
left:0;
right:0;
}
.pop-content{padding-top:17px;}
.pop-content p{text-align: left;padding-left: 20px;margin-bottom:0px;margin-top:7px;margin-bottom:5px;word-wrap: break-word; word-break: normal; }
.pop-content p.pop-text1{color:#feb518;font-size:18px;}
.pop-share img{width:63px}
.pop-share{border-bottom: 1px solid #e5e5e5;}
.pop-content button{padding: 15px;}
.qq_out{border-right:1px solid #e5e5e5;}
.qq,.wx{display: inline-block;background: none;padding:0px;font-size:16px;outline:none}
.qq{border-right: 1px solid #e5e5e5;}
.pop .botm .text{margin:0px;padding:10x 5px;font-size:16px;text-align:center}
.botm .pop-box{height:195px;}
.botm .bt{border-top:1px solid #e5e5e5;color:#feb518;margin-top:46px;}
.botp{z-index:99;}
.botm{z-index:10000;height:249px}
.botm .pop-content{padding-top:49px;}
.botm .p-cont{padding-left:0px;padding-left:10px;padding-right:10px;}
`
d.write(divstr);
function addpopstyle(newStyle) {
var styleElement = d.getElementById('xdfpopstyles');
if (!styleElement) {
styleElement = d.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'xdfpopstyles';
d.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(d.createTextNode(newStyle));
}
addpopstyle(cssstr);
}(window, document),
open: function (setting) {
var defaultsetting = {
title:"注册成功",
content:["注册完成就去分享吧~","静候佳音之时，可以和好友分享这一刻~","让更多亲友来体验超值课程"],
img:["images/qq.png","images/wx.png"],
button:["去QQ粘贴","去微信粘贴"],
share:function(){
document.querySelector('.pop').classList.remove("popclose");
document.querySelector('.botm').classList.add("popclose");
var clipboard = new Clipboard('.wx');
var clipstr=document.title+window.location.href;
// alert(clipstr)
document.querySelector(".pop .pop-close").addEventListener("click", function () {
document.querySelector('.pop').classList.add("popclose");
});
$('.bt button,.pop-share').click(function(){
document.querySelector('.botm').classList.remove("popclose");
document.querySelector('.botp').classList.add("popclose");
// $("[data-clipboard-text]").each(function () {
// console.log($(this).attr("data-clipboard-text"));
// });
// $(".wx").each(function () {
// $(this).attr("data-clipboard-text",clipstr);
// });
// clipboard.on('error', function(e) {
// document.querySelector('.p-cont').innerHTML='手机版本不支持，请手动选择“拷贝”进行复制!'+'【'+document.title+window.location.href+'】';
// $('.text').css('display','none');
// $('.botm').css('height','226px')
// });
clipboard.on('error', function(e) {
document.querySelector('.p-cont').innerHTML='手机版本不支持，请手动选择“拷贝”进行复制!'+'【'+'小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/'+'】';
$('.text').css('display','none');
$('.botm').css('height','226px')
});
})
document.querySelector(".botm .bt").addEventListener("click",function(){
document.querySelector('.pop').classList.add("popclose");
})
document.querySelector(".botm .pop-close").addEventListener("click",function(){
document.querySelector('.pop').classList.add("popclose");
document.querySelector('.botp').classList.remove("popclose");
})
}
}
$.extend(defaultsetting, setting);
defaultsetting.share();
document.querySelector('.pop-title').innerHTML=defaultsetting.title;
document.querySelector('.pop-text1').innerHTML=defaultsetting.content[0];
document.querySelector('.pop-text2').innerHTML=defaultsetting.content[1];
document.querySelector('.pop-text3').innerHTML=defaultsetting.content[2];
document.querySelector('.img1').src=defaultsetting.img[0];
document.querySelector('.img2').src=defaultsetting.img[1];
document.querySelector('.qq').innerHTML=defaultsetting.button[0];
document.querySelector('.wx').innerHTML=defaultsetting.button[1];
},
close: function () {
document.querySelector('.pop').classList.add("popclose");
}
}
// 最后将插件对象暴露给全局对象
_global = (function () { return this || (0, eval)('this'); }());
!('pop' in _global) && (_global.pop = pop);
}());
调取
<script src="http://bj.xdf.cn/bj_static/wiki/zc/js/xdfpop.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/pop1.js"></script>
<script type="text/javascript">
var formId = "52822e6d-4e88-4192-8e12-f078c487294b";
function submit_data() {
if ($('#name').val() == "") {
$('#name').focus();
// alert("姓名不能为空");
xdfpop.open({
title: "温馨提示",
content: "姓名不能为空哦~",
button: "知道了"
});
return false;
}
// if ($('#name').val() == "") {
// $('#name').focus();
// // alert("姓名不能为空");
// pop.open({
// title:"注册成功",
// content:["您已注册成功，稍后我们会联系您","静候佳音之时，您可以将此优惠分享给他人，","让更多亲友来体验超值课程"],
// img:["images/qq.png","images/wx.png"],
// button:["去QQ粘贴","去微信粘贴"],
// });
// return false;
// }
if ($('#tel').val() == "") {
$('#tel').focus();
// alert("手机不能为空");
xdfpop.open({
title: "温馨提示",
content: "手机号码不能为空哦~",
button: "知道了"
});
return false;
}
if ($('#verificationCode').val() == "") {
$('#verificationCode').focus();
// alert("请输入验证码");
xdfpop.open({
title: "温馨提示",
content: "请输入验证码吧~",
button: "知道了"
});
return false;
}
var inputName = new Array();
inputName[0] = "name";
inputName[1] = "tel";
inputName[2] = "grade";
var verificationCode = $("#verificationCode").val();
var telephone = $('#tel').val();
window.checkResultCallback = function (jsonObject) {
console.log('>>>>>', jsonObject.result,jsonObject.status);
if (jsonObject != null) {
//json.result验证是否成功，ok为短信验证成功，error为验证失败
if (jsonObject.result == "ok") {
//短信验证提示
if (jsonObject.status == "1") { //数据是否保存成功
//数据保存成功，提示或其他动作
// alert("注册成功！我们会尽快与您取得联系！");
// xdfpop.open({
// title: "完成",
// content: "注册成功！我们会尽快与您取得联系~",
// button: "知道了"
// });
pop.open({
title:"注册成功",
content:["您已注册成功，稍后我们会联系您","静候佳音之时，您可以将此优惠分享给他人，","让更多亲友来体验超值课程"],
img:["images/qq.png","images/wx.png"],
button:["去QQ粘贴","去微信粘贴"],
});
} else if (jsonObject.status == "501") {
// alert("此手机号已注册");
xdfpop.open({
title: "温馨提示",
content: "这个手机号码已经被注册过了~",
button: "知道了"
});
//刷新页面或其他行为
$('#tel').val('');
$('#verificationCode').val('');
} else if (jsonObject.status == "-1") {
// alert("配置文件不存在！");
xdfpop.open({
title: "温馨提示",
content: "配置文件不存在~",
button: "知道了"
});
} else {
// alert("系统错误，请刷新页面！");
xdfpop.open({
title: "温馨提示",
content: "系统错误，请刷新页面吧~",
button: "知道了"
});
//直接都刷新
window.location.reload;
}
} else if (jsonObject.result == "error") {
if (jsonObject.code == 403) {
// alert("验证码错误！");
xdfpop.open({
title: "温馨提示",
content: "验证码错误~",
button: "知道了"
});
//清空验证码输入框，或其他操作
$('#verificationCode').val('');
} else if (jsonObject.code == 402) {
// alert("验证码已过期，请重新获取验证码！");
xdfpop.open({
title: "温馨提示",
content: "验证码已过期，请重新获取验证码~",
button: "知道了"
});
//此处重置获取验证码按钮，或者刷新页面
window.location.reload;
} else if (jsonObject.code == 401) {
// alert("验证码错误次数过多，请重新获取验证码！");
xdfpop.open({
title: "温馨提示",
content: "验证码错误次数过多，请重新获取验证码~",
button: "知道了"
});
//此处重置获取验证码按钮
$('#verificationCode').val('');
} else if (jsonObject.code == 405) {
// alert("数据已保存成功！");
xdfpop.open({
title: "温馨提示",
content: "您已提交成功，请耐心等待~",
button: "知道了"
});
//此处重置获取验证码按钮
$('#verificationCode').val('');
} else {
// alert("系统错误，请刷新页面！");
xdfpop.open({
title: "温馨提示",
content: "系统错误，请刷新页面~",
button: "知道了"
});
//刷新页面
window.location.reload;
}
}
}
}
vaildNoteCode_submitData(inputName, formId, "少儿体验课", telephone, verificationCode);
// vaildNoteCode_submitData(inputName, "99029651-45f1-4a89-9f2e-56296cee2eb3", "市场部线下大活动", telephone, verificationCode);
}
var sends = {
checked: 1,
send: function () {
var numbers = /^1\d{10}$/;
var val = $('#tel').val().replace(/\s+/g, ""); //获取输入手机号码
if ($('.div-phone').find('span').length == 0 && $('.identity button').attr('class') == 'send1') {
if (!numbers.test(val) || val.length == 0) {
$('.div-phone').append('<span class="error">请输入正确手机号！</span>');
return false;
}
}
if (numbers.test(val)) {
// $(".send1").prop("disabled", true);
var onclickStr = $("#sendBtn").attr('onclick');
$('#sendBtn').attr('onclick', 'return false;' + onclickStr);
var time = 60;
$('.div-phone span').remove();
function timeCountDown() {
if (time == 0) {
// $(".send1").prop("disabled", false);
var onclickStr = $("#sendBtn").attr('onclick');
$('#sendBtn').attr('onclick', onclickStr.split(';')[1]);
clearInterval(timer);
$('.identity button').addClass('send1').removeClass('send0').html("获取验证码");
sends.checked = 1;
return true;
}
$('.identity button').html(time + "S后重发");
time--;
return false;
}
$('.identity button').addClass('send0').removeClass('send1');
timeCountDown();
var timer = setInterval(timeCountDown, 1000);
window.checkTelephoneExist = function (jsonObject) {
console.log('>>>>>', jsonObject.status);
if (jsonObject != null) {
var status = jsonObject.status;
if (status == -1 || status == 501) {
// alert("电话号码本页面已注册！");
xdfpop.open({
title: "温馨提示",
content: "电话号码本页面已注册~",
button: "知道了"
});
} else if (status == 1) {
//电话号码不存在，并下发短信成功
globalMsgId = jsonObject.msgId;
} else {
console.log("页面异常！" + status);
//刷新页面
window.location.reload;
}
}
}
getNoteCode(val, formId);
}
}
}
</script>
<script>
$(document).ready(function () {
$.ajax({
type: 'get',
async: false,
url: 'http://bjmx.xdf.cn/clue/form/getCountByFormId',
//url : 'http://clue.bj.staff.xdf.cn/clue/form/getCountByFormId',
dataType: 'jsonp',
data: {
formId: '52822e6d-4e88-4192-8e12-f078c487294b'
},
jsonp: 'callbackparam',
jsonpCallback: 'success_jsonpCallback',
success: function (json) {
// var randnum = 0;
// randnum = json.count;
// var newrandnum=randnum-100;
var len = json.count;
var len = len.toString();
var sub=len.substring(len.length,len.length-2);
var randnum = parseInt(sub) ;
// console.log(newrandnum)
if (randnum >= 100) {
// randnum = newrandnum;
// newrandnum=100;
var rn = ('' + randnum);
$(".getnum .nownum").text(rn);
// $("#register .res").css("display","none");
// var path="images/registerover.png";
// var demo=$("#register img").attr("src",path);
} else {
var rn = ('' + randnum);
$(".getnum .nownum").text(rn);
}
},
complete: function (XMLHttpRequest, textStatus) {
// alert(XMLResponse.responseText+XMLHttpRequest.status);
},
error: function (json, XMLResponse) {
//alert(XMLResponse.responseText+XMLHttpRequest.status);
result = "返回信息：" + json.message + "错误码：" + XMLHttpRequest.status;
}
});
$(".mod-1 .register .select select").change(function(){
$(this).css("color","#555");
});
});
function activehover(btn, content) {
$(btn).mouseenter(function () {
$(this).addClass("active").siblings().removeClass("active");
$(content).hide().eq($(this).index()).show();
})
}
activehover(".classbord .classtabs li", ".classbord .classcontents li");
</script>
