feat(module:modal): feat add modal closable and maskClosable demo (#195)

NG-ZORRO · Dec 25, 2018 · d3d3478 · d3d3478
1 parent 0759f65
commit d3d3478
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/components/modal/demo/basic.ts b/components/modal/demo/basic.ts
@@ -28,6 +28,24 @@ import { Modal, Toast } from 'ng-zorro-antd-mobile';
           <ListItem> <div Button [type]="'primary'" (onClick)="onClose('modal2')">买入</div> </ListItem>
         </List>
       </Modal>
+      <div Button (onClick)="showModal('modal3')">maskClosable</div>
+      <WhiteSpace></WhiteSpace>
+      <Modal [(ngModel)]="this.state.modal3" [transparent]="true" [title]="'Title'" [maskClosable]="true" (onClose)="onClose('modal3')">
+        <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
+          scoll content... <br />
+          scoll content... <br />
+          scoll content... <br />
+        </div>
+      </Modal>
+      <div Button (onClick)="showModal('modal4')">closable</div>
+      <WhiteSpace></WhiteSpace>
+      <Modal [(ngModel)]="this.state.modal4" [transparent]="true" [title]="'Title'" [closable]="true" (onClose)="onClose('modal4')">
+        <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
+          scoll content... <br />
+          scoll content... <br />
+          scoll content... <br />
+        </div>
+      </Modal>
     </WingBlank>
   `,
   styles: [
@@ -43,7 +61,9 @@ import { Modal, Toast } from 'ng-zorro-antd-mobile';
 export class DemoModalBasicComponent {
   state = {
     modal1: false,
-    modal2: false
+    modal2: false,
+    modal3: false,
+    modal4: false
   };
   footer = [
     {

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -116,19 +116,17 @@ export class ModalComponent implements ControlValueAccessor {
   @HostListener('mouseup', ['$event'])
   @HostListener('touchend', ['$event'])
   panend(event) {
-    event.preventDefault();
-    if ((!this.option.closable || !this.option.maskClosable) && !this.option.popup) {
-      return;
-    }
-    if (
-      (event && event.target && event.target.getAttribute('role') === 'dialog') ||
-      event.target.getAttribute('role') === 'close'
-    ) {
-      if (this.option.close) {
-        this.option.close();
-      } else {
-        this.onClose.emit();
-        this.leaveAnimation();
+    if (this.option.closable || this.option.maskClosable  || this.option.popup) {
+      if (
+        (event && event.target && event.target.getAttribute('role') === 'dialog') ||
+        event.target.getAttribute('role') === 'close'
+      ) {
+        if (this.option.close) {
+          this.option.close();
+        } else {
+          this.onClose.emit();
+          this.leaveAnimation();
+        }
       }
     }
   }