fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit 7ba8af8fa334cdb2eee6a84dde36e594c48329c8 1 parent f84618d3

fix bug

Inline Side-by-side
Showing 3 changed files with 47 additions and 55 deletions
@@ -25,14 +25,12 @@ class Modal { @@ -25,14 +25,12 @@ class Modal {
25 styleClass: '', 25 styleClass: '',
26 title: '', 26 title: '',
27 text: '', 27 text: '',
28 - buttons: [  
29 - {  
30 - text: '好',  
31 - handler: () => {  
32 - this.hide();  
33 - } 28 + buttons: [{
  29 + text: '好',
  30 + handler: () => {
  31 + this.hide();
34 } 32 }
35 - ] 33 + }]
36 }; 34 };
37 35
38 // 初始化参数 36 // 初始化参数
@@ -69,10 +67,7 @@ class Modal { @@ -69,10 +67,7 @@ class Modal {
69 } 67 }
70 68
71 // 居中显示 69 // 居中显示
72 - this.elem.css({  
73 - left: ($(window).width() - this.elem.outerWidth()) / 2,  
74 - top: ($(window).height() - this.elem.outerHeight()) / 2 + $(window).scrollTop()  
75 - }).show().addClass('animation-target'); 70 + this.elem.show().addClass('animation-target');
76 } 71 }
77 72
78 hide() { 73 hide() {
@@ -82,7 +77,7 @@ class Modal { @@ -82,7 +77,7 @@ class Modal {
82 } 77 }
83 78
84 Object.assign(Modal, { 79 Object.assign(Modal, {
85 - alert: (text, title)=> { 80 + alert: (text, title) => {
86 const modal = new Modal({ 81 const modal = new Modal({
87 text: text, 82 text: text,
88 title: title 83 title: title
@@ -90,22 +85,19 @@ Object.assign(Modal, { @@ -90,22 +85,19 @@ Object.assign(Modal, {
90 85
91 modal.show(); 86 modal.show();
92 }, 87 },
93 - confirm: (text, title, callback)=> { 88 + confirm: (text, title, callback) => {
94 const modal = new Modal({ 89 const modal = new Modal({
95 text: text, 90 text: text,
96 title: title, 91 title: title,
97 - buttons: [  
98 - {  
99 - text: '取消',  
100 - handler: function() {  
101 - this.hide();  
102 - }  
103 - },  
104 - {  
105 - text: '好',  
106 - handler: callback || $.noop 92 + buttons: [{
  93 + text: '取消',
  94 + handler: function() {
  95 + this.hide();
107 } 96 }
108 - ] 97 + }, {
  98 + text: '好',
  99 + handler: callback || $.noop
  100 + }]
109 }); 101 });
110 102
111 modal.show(); 103 modal.show();
@@ -10,12 +10,10 @@ @@ -10,12 +10,10 @@
10 const $ = require('jquery'); 10 const $ = require('jquery');
11 11
12 const ANIMATIONS = { 12 const ANIMATIONS = {
13 - none: {  
14 - in: 'overlay-in', 13 + none: { in : 'overlay-in',
15 out: 'overlay-out' 14 out: 'overlay-out'
16 }, 15 },
17 - fade: {  
18 - in: 'overlay-fade-in', 16 + fade: { in : 'overlay-fade-in',
19 out: 'overlay-fade-out' 17 out: 'overlay-fade-out'
20 } 18 }
21 }; 19 };
@@ -28,16 +26,15 @@ class Overlay { @@ -28,16 +26,15 @@ class Overlay {
28 this.defaults = { 26 this.defaults = {
29 className: 'overlay', 27 className: 'overlay',
30 clickToClose: true, // 点击关闭 28 clickToClose: true, // 点击关闭
31 - onClose: $.noop, // 关闭回调函数  
32 - animation: 'fade', // 动画效果 29 + onClose: $.noop, // 关闭回调函数
  30 + animation: 'fade', // 动画效果
33 disableScrolling: true // 是否禁止 31 disableScrolling: true // 是否禁止
34 }; 32 };
35 33
36 // 初始化参数 34 // 初始化参数
37 this.settings = Object.assign({}, this.defaults, opts); 35 this.settings = Object.assign({}, this.defaults, opts);
38 36
39 - this.settings.animationClasses = {  
40 - in: ANIMATIONS[this.settings.animation].in, 37 + this.settings.animationClasses = { in : ANIMATIONS[this.settings.animation].in,
41 out: ANIMATIONS[this.settings.animation].out 38 out: ANIMATIONS[this.settings.animation].out
42 }; 39 };
43 40
@@ -46,20 +43,20 @@ class Overlay { @@ -46,20 +43,20 @@ class Overlay {
46 }); 43 });
47 44
48 // 点击关闭 45 // 点击关闭
49 - this.elem.click(()=> { 46 + this.elem.click(() => {
50 if (this.settings.clickToClose) { 47 if (this.settings.clickToClose) {
51 this.hide(); 48 this.hide();
52 } 49 }
53 }); 50 });
54 51
55 - // if (this.settings.disableScrolling) {  
56 - // // 覆盖层出现时阻止滚动  
57 - // $(window).on('touchmove', (e)=> {  
58 - // if (this.isVisible) {  
59 - // e.preventDefault();  
60 - // }  
61 - // });  
62 - // } 52 + if (this.settings.disableScrolling) {
  53 + // 覆盖层出现时阻止滚动
  54 + document.body.addEventListener('touchmove', (e) => {
  55 + if (this.isVisible) {
  56 + e.preventDefault();
  57 + }
  58 + })
  59 + }
63 60
64 this.elem[0].addEventListener('webkitTransitionEnd', this._cleanup.bind(this)); 61 this.elem[0].addEventListener('webkitTransitionEnd', this._cleanup.bind(this));
65 } 62 }
@@ -78,8 +75,8 @@ class Overlay { @@ -78,8 +75,8 @@ class Overlay {
78 this.elem.appendTo('body'); 75 this.elem.appendTo('body');
79 76
80 this.elem.css({ 77 this.elem.css({
81 - visibility: 'visible'  
82 - }).show() 78 + visibility: 'visible'
  79 + }).show()
83 .removeClass(this.settings.animationClasses.out) 80 .removeClass(this.settings.animationClasses.out)
84 .addClass(this.settings.animationClasses.in); 81 .addClass(this.settings.animationClasses.in);
85 82
@@ -108,7 +105,7 @@ class Overlay { @@ -108,7 +105,7 @@ class Overlay {
108 }); 105 });
109 } 106 }
110 107
111 - setTimeout(()=> { 108 + setTimeout(() => {
112 this._cleanup(); 109 this._cleanup();
113 }, 200); 110 }, 200);
114 111
1 @import "overlay"; 1 @import "overlay";
2 2
3 .modal { 3 .modal {
4 - position: absolute; 4 + position: fixed;
5 margin: 0 auto; 5 margin: 0 auto;
6 background: #fcfcfc; 6 background: #fcfcfc;
7 width: 512px; 7 width: 512px;
8 z-index: 1001; 8 z-index: 1001;
  9 + left: 50%;
  10 + top: 50%;
  11 + transform: translate(-50%, -50%);
9 12
10 h2 { 13 h2 {
11 font-size: 32px; 14 font-size: 32px;
@@ -57,43 +60,43 @@ @@ -57,43 +60,43 @@
57 /* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */ 60 /* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */
58 @keyframes animation { 61 @keyframes animation {
59 0% { 62 0% {
60 - transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 63 + transform: translate(-50%, -50%) matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
61 } 64 }
62 65
63 4.3% { 66 4.3% {
64 - transform: matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 67 + transform: translate(-50%, -50%) matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
65 } 68 }
66 69
67 8.61% { 70 8.61% {
68 - transform: matrix3d(0.939, 0, 0, 0, 0, 0.939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 71 + transform: translate(-50%, -50%) matrix3d(0.939, 0, 0, 0, 0, 0.939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
69 } 72 }
70 73
71 12.91% { 74 12.91% {
72 - transform: matrix3d(1.026, 0, 0, 0, 0, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 75 + transform: translate(-50%, -50%) matrix3d(1.026, 0, 0, 0, 0, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
73 } 76 }
74 77
75 17.22% { 78 17.22% {
76 - transform: matrix3d(1.047, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 79 + transform: translate(-50%, -50%) matrix3d(1.047, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
77 } 80 }
78 81
79 28.33% { 82 28.33% {
80 - transform: matrix3d(1.01, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 83 + transform: translate(-50%, -50%) matrix3d(1.01, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
81 } 84 }
82 85
83 39.44% { 86 39.44% {
84 - transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 87 + transform: translate(-50%, -50%) matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
85 } 88 }
86 89
87 61.66% { 90 61.66% {
88 - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 91 + transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
89 } 92 }
90 93
91 83.98% { 94 83.98% {
92 - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 95 + transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
93 } 96 }
94 97
95 100% { 98 100% {
96 - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 99 + transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
97 } 100 }
98 } 101 }
99 102