1
1
import { createButton } from './button'
2
2
3
- interface ModelElements {
3
+ interface ModalElements {
4
4
$mask : JQuery
5
5
$main : JQuery
6
6
$container : JQuery
@@ -9,23 +9,23 @@ interface ModelElements {
9
9
$content : JQuery
10
10
}
11
11
12
- interface ModelControl extends ModelElements {
12
+ interface ModalControl extends ModalElements {
13
13
open : ( ) => void
14
14
close : ( ) => void
15
15
}
16
16
17
- interface CreateModelProps {
17
+ interface CreateModalProps {
18
18
root ?: JQuery
19
19
title ?: string
20
- onMount ?: ( elements : ModelElements ) => void
21
- onOpen ?: ( elements : ModelElements ) => void
22
- onClose ?: ( elements : ModelElements ) => void
20
+ onMount ?: ( elements : ModalElements ) => void
21
+ onOpen ?: ( elements : ModalElements ) => void
22
+ onClose ?: ( elements : ModalElements ) => void
23
23
}
24
24
25
25
/**
26
- * 创建 model 框。
26
+ * 创建 modal 框。
27
27
*/
28
- export function createModel ( props : CreateModelProps ) : ModelControl {
28
+ export function createModal ( props : CreateModalProps ) : ModalControl {
29
29
const { root, title, onOpen, onClose, onMount } = props
30
30
31
31
const $mask = $ ( '<div class="v2p-modal-mask">' )
@@ -51,7 +51,7 @@ export function createModel(props: CreateModelProps): ModelControl {
51
51
52
52
const $container = $mask . append ( $main ) . hide ( )
53
53
54
- const modelElements = {
54
+ const modalElements = {
55
55
$mask,
56
56
$main,
57
57
$container,
@@ -63,9 +63,11 @@ export function createModel(props: CreateModelProps): ModelControl {
63
63
// 用于判定是否已经绑定了事件, 避免重复绑定。
64
64
let boundEvent = false
65
65
66
- const maskClickHandler = ( ) => {
67
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
68
- handleModalClose ( )
66
+ const maskClickHandler = ( ev : JQuery . MouseUpEvent ) => {
67
+ if ( ev . currentTarget === $mask . get ( 0 ) && ev . currentTarget === ev . target ) {
68
+ // eslint-disable-next-line @typescript-eslint/no-use-before-define
69
+ handleModalClose ( )
70
+ }
69
71
}
70
72
71
73
const keyupHandler = ( ev : JQuery . KeyDownEvent ) => {
@@ -76,21 +78,21 @@ export function createModel(props: CreateModelProps): ModelControl {
76
78
}
77
79
78
80
const handleModalClose = ( ) => {
79
- $mask . off ( 'click ' , maskClickHandler )
81
+ $mask . off ( 'mouseup ' , maskClickHandler )
80
82
$ ( document ) . off ( 'keydown' , keyupHandler )
81
83
boundEvent = false
82
84
83
85
$container . fadeOut ( 'fast' )
84
86
document . body . classList . remove ( 'v2p-modal-open' )
85
87
86
- onClose ?.( modelElements )
88
+ onClose ?.( modalElements )
87
89
}
88
90
89
91
const handleModalOpen = ( ) => {
90
92
// Hack: 为了防止 open 点击事件提前冒泡到 document 上,需要延迟绑定事件。
91
93
setTimeout ( ( ) => {
92
94
if ( ! boundEvent ) {
93
- $mask . on ( 'click ' , maskClickHandler )
95
+ $mask . on ( 'mouseup ' , maskClickHandler )
94
96
$ ( document ) . on ( 'keydown' , keyupHandler )
95
97
boundEvent = true
96
98
}
@@ -99,16 +101,16 @@ export function createModel(props: CreateModelProps): ModelControl {
99
101
$container . fadeIn ( 'fast' )
100
102
document . body . classList . add ( 'v2p-modal-open' )
101
103
102
- onOpen ?.( modelElements )
104
+ onOpen ?.( modalElements )
103
105
}
104
106
105
107
$closeBtn . on ( 'click' , handleModalClose )
106
108
107
- onMount ?.( modelElements )
109
+ onMount ?.( modalElements )
108
110
109
111
if ( root ) {
110
112
root . append ( $container )
111
113
}
112
114
113
- return { ...modelElements , open : handleModalOpen , close : handleModalClose }
115
+ return { ...modalElements , open : handleModalOpen , close : handleModalClose }
114
116
}
0 commit comments