Authored by 沈志敏

fix bug

... ... @@ -25,14 +25,12 @@ class Modal {
styleClass: '',
title: '',
text: '',
buttons: [
{
text: '好',
handler: () => {
this.hide();
}
buttons: [{
text: '好',
handler: () => {
this.hide();
}
]
}]
};
// 初始化参数
... ... @@ -69,10 +67,7 @@ class Modal {
}
// 居中显示
this.elem.css({
left: ($(window).width() - this.elem.outerWidth()) / 2,
top: ($(window).height() - this.elem.outerHeight()) / 2 + $(window).scrollTop()
}).show().addClass('animation-target');
this.elem.show().addClass('animation-target');
}
hide() {
... ... @@ -82,7 +77,7 @@ class Modal {
}
Object.assign(Modal, {
alert: (text, title)=> {
alert: (text, title) => {
const modal = new Modal({
text: text,
title: title
... ... @@ -90,22 +85,19 @@ Object.assign(Modal, {
modal.show();
},
confirm: (text, title, callback)=> {
confirm: (text, title, callback) => {
const modal = new Modal({
text: text,
title: title,
buttons: [
{
text: '取消',
handler: function() {
this.hide();
}
},
{
text: '好',
handler: callback || $.noop
buttons: [{
text: '取消',
handler: function() {
this.hide();
}
]
}, {
text: '好',
handler: callback || $.noop
}]
});
modal.show();
... ...
... ... @@ -10,12 +10,10 @@
const $ = require('jquery');
const ANIMATIONS = {
none: {
in: 'overlay-in',
none: { in : 'overlay-in',
out: 'overlay-out'
},
fade: {
in: 'overlay-fade-in',
fade: { in : 'overlay-fade-in',
out: 'overlay-fade-out'
}
};
... ... @@ -28,16 +26,15 @@ class Overlay {
this.defaults = {
className: 'overlay',
clickToClose: true, // 点击关闭
onClose: $.noop, // 关闭回调函数
animation: 'fade', // 动画效果
onClose: $.noop, // 关闭回调函数
animation: 'fade', // 动画效果
disableScrolling: true // 是否禁止
};
// 初始化参数
this.settings = Object.assign({}, this.defaults, opts);
this.settings.animationClasses = {
in: ANIMATIONS[this.settings.animation].in,
this.settings.animationClasses = { in : ANIMATIONS[this.settings.animation].in,
out: ANIMATIONS[this.settings.animation].out
};
... ... @@ -46,20 +43,20 @@ class Overlay {
});
// 点击关闭
this.elem.click(()=> {
this.elem.click(() => {
if (this.settings.clickToClose) {
this.hide();
}
});
// if (this.settings.disableScrolling) {
// // 覆盖层出现时阻止滚动
// $(window).on('touchmove', (e)=> {
// if (this.isVisible) {
// e.preventDefault();
// }
// });
// }
if (this.settings.disableScrolling) {
// 覆盖层出现时阻止滚动
document.body.addEventListener('touchmove', (e) => {
if (this.isVisible) {
e.preventDefault();
}
})
}
this.elem[0].addEventListener('webkitTransitionEnd', this._cleanup.bind(this));
}
... ... @@ -78,8 +75,8 @@ class Overlay {
this.elem.appendTo('body');
this.elem.css({
visibility: 'visible'
}).show()
visibility: 'visible'
}).show()
.removeClass(this.settings.animationClasses.out)
.addClass(this.settings.animationClasses.in);
... ... @@ -108,7 +105,7 @@ class Overlay {
});
}
setTimeout(()=> {
setTimeout(() => {
this._cleanup();
}, 200);
... ...
@import "overlay";
.modal {
position: absolute;
position: fixed;
margin: 0 auto;
background: #fcfcfc;
width: 512px;
z-index: 1001;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h2 {
font-size: 32px;
... ... @@ -57,43 +60,43 @@
/* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */
@keyframes animation {
0% {
transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.3% {
transform: matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
8.61% {
transform: matrix3d(0.939, 0, 0, 0, 0, 0.939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(0.939, 0, 0, 0, 0, 0.939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
12.91% {
transform: matrix3d(1.026, 0, 0, 0, 0, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1.026, 0, 0, 0, 0, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
17.22% {
transform: matrix3d(1.047, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1.047, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
28.33% {
transform: matrix3d(1.01, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1.01, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
39.44% {
transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
61.66% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
83.98% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
... ...