弹出框小插件-尔法版

项目需要。挺急。1小时左右写的。可能有些问题。4个型号。代码很简单，建议都自己弹弹看。

//调用方式：引入JS。引入JQ。有空我会改成全原生。已经改了一半了。

然后

mydoor({
type:'m', //类型。不写不显示
title:'',//名字
main:'个人资料填写完才能参加兼职哦',//详细
but1:'立即',//按钮名
but2:'暂不',//按钮名
yes:function(){ //函数。不写就是空函数
$.cookie("v_tab_id","2");
window.location.href="information.html";
},
time:'1' //多久再次执行、不写默认0.
})

就可以了。样式有修改的，自己改吧。都写在JS里面了。

每个型号都有不同的参数可选。自己看。建议先都

mydoor({
type:'m', //  s m l sm  只写4个型号都弹一下看看。
})

 

//这是插件包

function mydoor(opt){
var type = opt.type||'';
console.log(opt);
if(type=='s'){
var mydoor1 = new mydoors();
mydoor1.init(opt);
}else if(type=='m'){
var mydoor1 = new mydoorm();
mydoor1.init(opt);
}else if(type=='l'){
var mydoor1 = new mydoorl();
mydoor1.init(opt);
}else if(type=='sm'){
var mydoor1 = new mydoorsm();
mydoor1.init(opt);
}

}

function mydoors(){
//解决复用性能问题。ver2.0估计再加。也许就不加了。反正没啥用处
this.settings={
doit:function(){

}
}
}

function mydoorm(){
//解决复用性能问题。ver2.0估计再加。也许就不加了。反正没啥用处
this.settings={
doit:function(){

}
}
};

function mydoorl(){
//解决复用性能问题。ver2.0估计再加。也许就不加了。反正没啥用处
this.settings={
doit:function(){

}
}
};

function mydoorsm(){
//解决复用性能问题。ver2.0估计再加。也许就不加了。反正没啥用处
this.settings={
doit:function(){

}
}
};

mydoors.prototype.init=function(opt){
var title = opt.title||'操作异常';
var height = opt.height||7;
if(height>9||height<3){height=7;}
var mydoortime = opt.time||'2';

var str = '<div id="mydoorlay"><div style="opacity: 1; position: fixed; padding: 15px 20px;background: #4d4d4d; color: #fff; border-radius: 5px; font-size: 12px; top: 100vh;" id="mydoorlays">'+title+'</div></div>';
$('body').prepend(str);

var mydoorlays = document.getElementById('mydoorlays');
mydoorlays.style.left = (viewWidth() - mydoorlays.offsetWidth)/2 + 'px';
mydoorlays.style.top = (viewHeight()) + 'px';
var strhei = parseInt((viewHeight())/10*height);
var time3=setInterval(function(a){
var hei = parseInt(mydoorlays.style.top);
if(hei<=strhei){
clearInterval(time3);
timeset();
}
mydoorlays.style.top = (hei-5)+'px';
},5)
function timeset(){
var mydoorlay = document.getElementById('mydoorlay');
setTimeout(function(){
var time4=setInterval(function(a){
var myopc = getStyle(mydoorlays,'opacity')
if(myopc=='0'){
clearInterval(time4);
var body = document.getElementsByTagName('body')[0];
body.removeChild(mydoorlay)//从父节点o上面移除子节点a
}
console.log(myopc)
mydoorlays.style.opacity = myopc-0.05;

},5)
},mydoortime*1000)
}
}

mydoorm.prototype.init=function(opt){
var title = opt.title||'提示';
var main = opt.main||' ';
var but1 = opt.but1||'确定';
var but2 = opt.but2||'否';
var yes = opt.yes||function(){};
var no = opt.no||function(){$('.opac').hide()};
var time = opt.time||'0';

var str = '<div style="display:none" class="opac">'+
'<div class="opacts"></div>'+
'<div class="opactss">'+
'<h3 class="opach3">'+title+'</h3>'+
'<p>'+main+'</p>'+
'<a class="butbut1" href="javascript:;">'+but1+'</a>'+
'<a style=" background: #d5d5d5;margin-right: 0;" class="butbut2" href="javascript:;">'+but2+'</a>'+
'<div class="opacX"><span></span><span></span></div></div></div>';

var cssstr='<style>'+
'.opacts{padding:0;margin:0; z-index: 9999; background: #000; width: 100vw; height: 100vh; position: fixed; opacity: 0.6; top: 0; left: 0;}'+
'.opactss{border-radius: 4px; z-index: 10000; text-align: center; width: 293px; height: 181px; background: #fff; position: fixed; top: 50%; left: 50%; margin-top:-96px;margin-left: -147px;}'+
'.opach3{border-radius: 4px; padding:0;margin:0; height: 40px; background: #fff; font-size: 16px; color: #999; text-align: center; line-height: 41px; border-bottom: 1px solid #ffe1d2;}'+
'.opac p{padding:0;margin:0;height: 73px; font-size: 15px; text-align: center; line-height: 73px; color: #494949; margin-bottom: 8ppx;}'+
'.opac a{text-decoration: none; border-radius: 4px; margin-right: 32px; display: inline-block; width: 90px; height: 32px; background: #ff6413; font-size: 14px; color: #fefefe; text-align: center; line-height: 32px;}'+
'.opacX{z-index:10000; position: absolute; width: 16px; height: 16px;bottom: -45px; left: 50%; margin-left: -8px;}'+
'.opacX span{position: absolute; top: 0; left: 0; display: block; background: #e9e9e9; height: 3px;-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform: rotate(45deg); }'+
'.opacX span:nth-child(2){width: 20px; height: 2px; left: -9px;}'+
'.opacX span:nth-child(1){height: 20px; width: 2px;top: -9px;}</style>'

$('head').prepend(cssstr);
$('body').prepend(str);

var mydoorTime = getCookie('mydoorTime');
if(mydoorTime!='m'){
$('.opac').show();$('.opac').show();
$('.opacts').click(function(){
$('.opac').remove();
setCookie('mydoorTime','m',time*3600);
});
$('.opacX').click(function(){
$('.opac').remove();
setCookie('mydoorTime','m',time*3600);
});
$('.butbut1').click(function(){
yes();
});
$('.butbut2').click(function(){
setCookie('mydoorTime','m',time*3600);
no();
});
}
}

mydoorl.prototype.init=function(opt){
var picw = opt.picw||'0';
var pich = opt.pich||'0';
var picsrc = opt.picsrc||'';
var bgsrc = opt.bgsrc||'';
var doit = opt.doit||function(){};
var time = opt.time||'0';

if(bgsrc){
var bgsrc = 'background: url('+opt.bgsrc+') no-repeat;background-size: 100% 100%;'
}else{
var bgsrc = 'background: #000; opacity: 0.9;';
}
var str = '<div id="mydoorl">'+
'<div id="mydoorlBg"></div>'+
'<div id="mydoorlpic"><img id="mydoorlimg" src="'+picsrc+'" alt=""></div>'+
'</div>';

var cssstr='<style>'+
'#mydoorl{position: fixed;width: 100vw;height: 100vh; top: 0;left: 0; overflow: hidden;}'+
'#mydoorlBg{position: absolute;width: 100vw;height: 100vh; top: 0;left: 0; '+bgsrc+' }'+
'#mydoorlpic{}'+
'#mydoorlpic img{position: absolute; width: '+picw+'; height:'+pich+';}'+
'</style>'

$('head').prepend(cssstr);
$('body').prepend(str);

var mydoorlimg = document.getElementById('mydoorlimg');
mydoorlimg.style.left = (viewWidth() - mydoorlimg.offsetWidth)/2 + 'px';
mydoorlimg.style.top = (viewHeight() - mydoorlimg.offsetHeight)/2 + 'px';

var mydoorTimeL = getCookie('mydoorTimeL');
// if(mydoorTime==undefined||toString(mydoorTime)='null'){
// mydoorTime=0;
// }
if(mydoorTimeL!='L'){
$('#mydoorl').show();$('#mydoorl').show();
$('#mydoorlBg').click(function(){
$('#mydoorl').remove();
setCookie('mydoorTimeL','L',time*3600);
});
$('#mydoorlpic').click(function(){
doit();
});
}
}

mydoorsm.prototype.init=function(opt){
var title = opt.title||'延迟到账';
var main = opt.main||'非工作日提现，延迟至下周一11:00之前到账';
var time = opt.time||'24';
var doit = opt.doit||function(){}

var str = '<div style="display:none" class="opac">'+
'<div class="opacts"></div>'+
'<div class="opactss">'+
'<h3 class="opach3">'+title+'</h3>'+
'<div class="p"><span class="mydoorsay">'+main+'</span></div>'+
'<a class="butbut1" href="javascript:;"></a>'+
'<div class="opacX"><span></span><span></span></div></div></div>';

var cssstr='<style>'+
'.opacts{padding:0;margin:0; z-index: 9999; background: #000; width: 100vw; height: 100vh; position: fixed; opacity: 0.6; top: 0; left: 0;}'+
'.opactss{border-radius: 4px; z-index: 10000; text-align: center; width: 19.375rem; height: 14.875rem; background: #fff; position: fixed; top: 50%; left: 50%; margin-top:-7.44rem;margin-left: -9.69rem;}'+
'.opach3{position: absolute; top: 1.69rem; width: 100%; text-align: center; font-size: 20px; line-height: 20px; height: 20px; color: #000;}'+
'.opac .p{position: absolute;width: 13.12rem; height: 7.5rem; top: 50%; left: 50%; margin-left: -6.56rem; margin-top: -3.75rem; line-height: 1.875rem; color: #898989; font-size:1rem;}'+
'.opac span{position: absolute;top: 50%;transform: translateY(-50%); width: 100%; left: 0;}'+
'.butbut1{background: url(../image/tixian.png) no-repeat; background-size: 100% auto; position: absolute; top: 10.625rem; width: 6.625rem; height: 2.25rem; left: 50%; margin-left: -3.31rem;}'+
'.opacX{z-index:10000; position: absolute; width: 16px; height: 16px;bottom: -45px; left: 50%; margin-left: -8px;}'+
'.opacX span{position: absolute; top: 0; left: 0; display: block; background: #e9e9e9; height: 3px;-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform: rotate(45deg); }'+
'.opacX span:nth-child(2){width: 20px; height: 2px; left: -9px;}'+
'.opacX span:nth-child(1){height: 20px; width: 2px;top: -9px;}'+
'</style>'

$('head').prepend(cssstr);
$('body').prepend(str);

var mydoorTimesm = getCookie('mydoorTimesm');
if(!mydoorTimesm){
$('.opac').show();
}
$('.opacX').click(function(){
setCookie('mydoorTimesm','sm',time*3600);
$('.opac').remove();
});
$('.opacts').click(function(){
setCookie('mydoorTimesm','sm',time*3600);
$('.opac').remove();
});
$('.butbut1').click(function(){
setCookie('mydoorTimesm','sm',time*3600);
doit();
});

}

 

function setCookie(cname,cvalue,expires){
if(arguments.length == 2){
document.cookie = cname+'='+cvalue;
}else {
var date = new Date();
date.setDate( date.getDate() + expires );
var time = date.toGMTString();
document.cookie = cname+'='+cvalue+';expires='+time;
}
}

function getCookie(cname){
var cookie = document.cookie;
var cookieArr = cookie.split('; ');
//遍历所有的cookie
for(var i in cookieArr){
var str = cookieArr[i];
var item = str.split('=');
if(item[0] === cname){
return item[1];
}
}
return null; //
}
function viewWidth(){
return document.documentElement.clientWidth;
}
function viewHeight(){
return document.documentElement.clientHeight;
}
function getStyle(obj,styleName){
if(obj.currentStyle){
return obj.currentStyle[styleName];
}else{
return getComputedStyle(obj,null)[styleName];
}
}