最近用到了很多弹窗和页面加载效果，之前只是随调随用，也没去整理，网上大多的插件要不是太冗余，就是样式风格太呆板，所以今天闲着就整理了一个出来。具备基本的弹窗功能，包括alert、conrirm、tips三种。（三种的区别是alert弹窗只生成确定按钮，接受确定回调。confirm弹窗生成确定和取消按钮，接受确定和取消回调。tips不生成按钮，可以设置自动隐藏或者点击遮罩层来隐藏）。组件可以更换背景、文字、宽高等属性，也具备选择是否添加遮罩层、回调函数等基本功能。此外，也一并引入了页面loading的效果。
组件用到了css3的动画库** animated.min.css，可以自行引入。弹窗组件主要用闭包的形式去写，支持将整个变量赋值给window，也支持用es6 module exports** 的方法供项目随处使用。下面贴上popupwin.js的代码：
!function(){
var popup = { //css3动画库所有动画效果 任君使用
EFFECT:["bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight",
"fadeInRightBig","fadeInUp","fadeInUpBig","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedIn","lightSpeedOut","rotateIn","rotateInDownLeft","rotateInDownRight",
"rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLe",
"rotateOutUpRigt","slideInDown","slideInLeft","slideInRight","slideOutLeft","slideOutRight","slideOutUp","hinge","rollIn","rollOut"],
defaultOptions:{
themeColor: {
bgColor: '#e5004f', //主题背景颜色
fontColor: '#fff' //主题文字颜色
},
type: 'alert', //弹框类型 包括 alert、confirm、tips三种
title: '提示', //弹框标题
content: '', //弹框内容
width: '90%', //弹框宽度
yes: '确定', //确定按钮 文本
no: '取消', //取消按钮 文本
isHide: false, //是否在弹出后隐藏
onConfirm: function(){ //点击确定执行的回调函数
var options = {};
options.effect = 'bounceOut';
this.showAnimation('bounceOut',true);
this.removeMask();
},
onCancel: function(){ //点击取消执行的回调函数
var options = {};
options.effect = 'bounceOut';
this.showAnimation('bounceOut',true);
this.removeMask();
},
effect: 'bounceIn', //弹框效果
mask: null //是否有背景遮罩层 传入透明度和是否可以点击 如{opacity: 0.8,isClick: true}
},
_bindEvent: function(options){
if(options.onConfirm){
$(document).off('click','.confirm-btn');
$(document).on('click','.confirm-btn',options.onConfirm.bind(this));
}
if(options.onCancel){
$(document).off('click','.cancel-btn');
$(document).on('click','.cancel-btn',options.onCancel.bind(this));
}
},
showAnimation: function(effect,isHide){
//isHide参数表示弹窗在弹出后隔一段时间自动隐藏
if(effect && this.checkEffect(effect)){
$('.dialog-diy').addClass(' animated '+ effect).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
$(this).removeClass(' animated '+ effect);
if(isHide){
$('.dialog-diy').hide();
}
});
}
},
getTemplate: function(options){
var onConfirm = (options.onConfirm && typeof(options.onConfirm) === 'function' ?'onConfirm' : '');
var onCancel = (options.onConfirm && typeof(options.onCancel) === 'function' ?'onCancel' : '');
switch(options.type){
case 'alert': return $('<div class="popup dialog-diy" style="width:'+options.width+';left:'+getOffsetLeft(options.width)+'%">\
<span class="close"></span>\
<div class="pop-header" style="background:'+options.themeColor.bgColor+';color:'+options.themeColor.fontColor+'">'+options.title+'</div>\
<div class="pop-body">'+options.content+'\
</div>\
<div class="pop-footer"><a class="confirm-btn '+onConfirm+'" >'+options.yes+'</a></div>\
</div>');
case 'confirm': return $('<div class="popup dialog-diy" style="width:'+options.width+';left:'+getOffsetLeft(options.width)+'%">\
<span class="close"></span>\
<div class="pop-header" style="background:'+options.themeColor.bgColor+';color:'+options.themeColor.fontColor+'">'+options.title+'</div>\
<div class="pop-body">'+options.content+'\
</div>\
<div class="pop-footer"><a class="cancel-btn '+onCancel+'" href="javascript:void(0)">'+options.no+'</a>\
<a class="confirm-btn '+onConfirm+'" href="javascript:void(0)">'+options.yes+'</a>\
</div>\
</div>');
case 'tips': return $('<div class="popup dialog-diy" style="width:'+options.width+';left:'+getOffsetLeft(options.width)+'%">\
<span class="close"></span>\
<div class="pop-header" style="background:'+options.themeColor.bgColor+';color:'+options.themeColor.fontColor+'">'+options.title+'</div>\
<div class="pop-body">'+options.content+'\
</div>\
</div>') ;
}
function getOffsetLeft(width){
var leftRate = 0;
var widthRate = Number(width.substring(0,width.length-1));
if(widthRate > 0 && widthRate < 100) {
leftRate = (100-widthRate)/2;
}
return leftRate;
}
},
removeDialog: function(){
if($('.dialog-diy').length){
$('.dialog-diy').remove();
}
if($('#popupMask').length){
$('#popupMask').remove();
}
},
removeMask: function(){
if($('#popupMask').length){
$('#popupMask').fadeOut();
setTimeout(function(){
$('#popupMask').remove();
},1000);
}
},
checkEffect: function(effect){
effect = effect || "";
if(!effect){return false;}
var tmp = this.EFFECT.join(",");
if(tmp.indexOf(effect)>=0){return true;}
return false;
},
setMask: function(mask){
//传入两个参数 透明度和是否可以点击 isClick为真的情況下可以通過点击遮罩层关闭弹窗
var self = this;
var $mask = $('<div id="popupMask" style="width:100%;height:100%;position:absolute;left:0;top:0;background:#000;opacity:'+mask.opacity+'"></div>');
$('body').append($mask);
if(mask.isClick){
$(document).off('click','#popupMask');
$(document).on('click','#popupMask',function(){
self.showAnimation('bounceOut',true);
self.removeMask();
});
}
},
isDot: function(num){ //判断是否为大于0小于1的小数
if(!isNaN(num) && num < 1){
return true;
}
return false;
},
alert: function(title,content,cb){
var opts = this.defaultOptions;
opts.title = title || this.defaultOptions.title;
opts.content = content;
opts.type = 'alert';
if(cb && typeof cb === 'function'){
opts.onConfirm = cb;
}
var tpl = this.getTemplate(opts);
$('body').append(tpl);
this.showAnimation(opts.effect);
this._bindEvent(opts);
},
confirm: function(title,content,cb1,cb2){
var opts = this.defaultOptions;
opts.title = title || this.defaultOptions.title;
opts.content = content;
opts.type = 'confirm';
if(cb1 && cb1 === 'function'){
opts.onConfirm = cb1;
}
if(cb2 && cb2 === 'function'){
opts.onCancel = cb2;
}
var tpl = this.getTemplate(opts);
$('body').append(tpl);
this.showAnimation(opts.effect);
this._bindEvent(opts);
},
tips: function(title,content){
var self = this;
var opts = this.defaultOptions;
opts.title = title || this.defaultOptions.title;
opts.content = content || '';
opts.type = 'tips';
var tpl = this.getTemplate(opts);
$('body').append(tpl);
this.showAnimation(opts.effect);
setTimeout(function(){
self.showAnimation('bounceOut',true);
self.removeMask();
},3000);
},
removeLoading: function(){
if($('.popup-spinner').length){
$('.popup-spinner').fadeOut();
setTimeout(function(){
$('.popup-spinner').remove();
},2000);
}
if($('#popupMask').length){
$('#popupMask').fadeOut();
setTimeout(function(){
$('#popupMask').remove();
},2000);
}
},
loading: function(opacity,isClick,color){//传入透明度，是否可以点击，加载条颜色
if($('.popup-spinner').length){
$('.popup-spinner').remove();
}
if($('#popupMask').length){
$('#popupMask').remove();
}
var $loading = $('<div class="popup-spinner"><div style="background-color:'+color+'" class="bounce1"></div><div style="background-color:'+color+'" class="bounce2"></div><div style="background-color:'+color+'" class="bounce3"></div></div>');
$('body').append($loading);
var mask = {opacity:opacity,isClick:isClick};
this.setMask(mask);
},
_ready: function(options){
console.log(options);
var self = this;
this.removeDialog();
var tpl = this.getTemplate(options);
$('body').append(tpl);
if(options.mask && this.isDot(options.mask.opacity)){
this.setMask(options.mask);
}
this.showAnimation(options.effect);
if(options.isHide){
setTimeout(function(){
self.showAnimation('bounceOut',true);
self.removeMask();
},3000);
}
},
_init: function(options){
var options = options || this.defaultOptions;
var self = this;
for(var key in this.defaultOptions){
if(options[key] == undefined){
options[key] = this.defaultOptions[key];
}
}
$(function(){
self._ready(options);
});
this._bindEvent(options);
}
};
window.popup = popup; //赋值给window下的变量
module.exports = popup; //es6模块导出
}();
可以通过 _init 函数初始化弹窗，也可以简洁调用alert、confirm、tips。代码如下：
//导入相关 js css
import '../../common/css/popupwin.css'
import '../../common/css/animated.css'
import $ from 'expose-loader?!jquery'
import popup from '../../common/js/lib/popupwin.js'
//没有传递的参数将会使用组件的默认参数，参看defaultOptions
var options = {
themeColor: {
bgColor: 'yellow',
fontColor: '#000'
},
type: 'confirm',
title: '温馨提示',
content: 'hellowrod!!!',
width: '90%',
yes: '确定',
no: '取消',
isHide: false,
onConfirm: function(){alert('just do it');},
onCancel: null,
effect: 'bounceIn',
mask: {
opacity: 0.8,
isClick: true
}
};
popup._init(options); //通用方式调用
//alert简洁调用
popup.alert('提示'，'helloworld come from alert');
//confirm简洁调用
popup.confirm('提示','helloworld come from confirm',function(){
alert('just do it');
});
//tips简洁调用
popup.tips('提示','helloworld come from tips');
//loading加载
popup.loading(0.8，true,'#fff');
//移除loading
popup.removeLoading();
附上popupwin.css的样式代码
/**弹窗样式*/
.popup{width: 90%;max-width: 500px;margin: 30px auto 0 auto;position: absolute;background: #fff;border-radius: .1rem;top: 20%;left: 5%;z-index: 999;}
.popup .pop-header{color:#fff;padding:.08rem 0;background:#e5004f;text-align:center;font-size:.16rem;border-radius:.1rem .1rem 0 0;}
.popup .pop-body{padding:.15rem .15rem .15rem;min-height:1rem;color:#000;font-size:.16rem;}
.popup .pop-body.large{padding:.15rem;min-height:1rem;max-height:3rem;overflow:auto;}
.popup .pop-footer{text-align:center;padding-bottom:.2rem}
.popup .pop-footer .btn{width:60%;}
/**loading动画样式**/
.popup-spinner {width: 1rem;height: .3rem;position: absolute;top:50%;left:50%;margin-left: -.5rem;margin-top: -.15rem;line-height: .3rem;z-index: 1000;}
.popup-spinner > div {width: .15rem;height: .15rem;background-color: #67CF22;margin-left: .05rem;margin-right: .05rem;border-radius: 100%;display: inline-block;-webkit-animation: bouncedelay 1.4s infinite ease-in-out;animation: bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.popup-spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.popup-spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}
@-webkit-keyframes bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0.0) }40% { -webkit-transform: scale(1.0) }}
@keyframes bouncedelay {0%, 80%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 40% {transform: scale(1.0);-webkit-transform: scale(1.0);}}
总结
无。
