11import { createButton } from './button'
22
3- interface ModelElements {
3+ interface ModalElements {
44 $mask : JQuery
55 $main : JQuery
66 $container : JQuery
@@ -9,23 +9,23 @@ interface ModelElements {
99 $content : JQuery
1010}
1111
12- interface ModelControl extends ModelElements {
12+ interface ModalControl extends ModalElements {
1313 open : ( ) => void
1414 close : ( ) => void
1515}
1616
17- interface CreateModelProps {
17+ interface CreateModalProps {
1818 root ?: JQuery
1919 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
2323}
2424
2525/**
26- * 创建 model 框。
26+ * 创建 modal 框。
2727 */
28- export function createModel ( props : CreateModelProps ) : ModelControl {
28+ export function createModal ( props : CreateModalProps ) : ModalControl {
2929 const { root, title, onOpen, onClose, onMount } = props
3030
3131 const $mask = $ ( '<div class="v2p-modal-mask">' )
@@ -51,7 +51,7 @@ export function createModel(props: CreateModelProps): ModelControl {
5151
5252 const $container = $mask . append ( $main ) . hide ( )
5353
54- const modelElements = {
54+ const modalElements = {
5555 $mask,
5656 $main,
5757 $container,
@@ -63,9 +63,11 @@ export function createModel(props: CreateModelProps): ModelControl {
6363 // 用于判定是否已经绑定了事件, 避免重复绑定。
6464 let boundEvent = false
6565
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+ }
6971 }
7072
7173 const keyupHandler = ( ev : JQuery . KeyDownEvent ) => {
@@ -76,21 +78,21 @@ export function createModel(props: CreateModelProps): ModelControl {
7678 }
7779
7880 const handleModalClose = ( ) => {
79- $mask . off ( 'click ' , maskClickHandler )
81+ $mask . off ( 'mouseup ' , maskClickHandler )
8082 $ ( document ) . off ( 'keydown' , keyupHandler )
8183 boundEvent = false
8284
8385 $container . fadeOut ( 'fast' )
8486 document . body . classList . remove ( 'v2p-modal-open' )
8587
86- onClose ?.( modelElements )
88+ onClose ?.( modalElements )
8789 }
8890
8991 const handleModalOpen = ( ) => {
9092 // Hack: 为了防止 open 点击事件提前冒泡到 document 上,需要延迟绑定事件。
9193 setTimeout ( ( ) => {
9294 if ( ! boundEvent ) {
93- $mask . on ( 'click ' , maskClickHandler )
95+ $mask . on ( 'mouseup ' , maskClickHandler )
9496 $ ( document ) . on ( 'keydown' , keyupHandler )
9597 boundEvent = true
9698 }
@@ -99,16 +101,16 @@ export function createModel(props: CreateModelProps): ModelControl {
99101 $container . fadeIn ( 'fast' )
100102 document . body . classList . add ( 'v2p-modal-open' )
101103
102- onOpen ?.( modelElements )
104+ onOpen ?.( modalElements )
103105 }
104106
105107 $closeBtn . on ( 'click' , handleModalClose )
106108
107- onMount ?.( modelElements )
109+ onMount ?.( modalElements )
108110
109111 if ( root ) {
110112 root . append ( $container )
111113 }
112114
113- return { ...modelElements , open : handleModalOpen , close : handleModalClose }
115+ return { ...modalElements , open : handleModalOpen , close : handleModalClose }
114116}
0 commit comments