基本适应0.7.0版本，部分兼容问题待修

components/index.ts

@@ -22,6 +22,7 @@ import { NzListModule } from './list/nz-list.module';
 import { NzLocaleModule } from './locale/nz-locale.module';
 import { NzMenuModule } from './menu/nz-menu.module';
 import { NzMessageModule } from './message/nz-message.module';
+import { NzModalModule } from './modal/nz-modal.module';
 import { NzNotificationModule } from './notification/nz-notification.module';
 import { NzPaginationModule } from './pagination/nz-pagination.module';
 import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
@@ -41,10 +42,8 @@ import { NzTimelineModule } from './timeline/nz-timeline.module';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 
-export * from './locale/index';
-export * from './list/index';
-
 import { NzMessageService } from './message/nz-message.service';
+import { NzModalService } from './modal/nz-modal.service';
 import { NzNotificationService } from './notification/nz-notification.service';
 
 export { NzNotificationService } from './notification/nz-notification.service';
@@ -54,6 +53,10 @@ export { NzMessageService } from './message/nz-message.service';
 export { NZ_MESSAGE_CONFIG } from './message/nz-message-config';
 export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
 
+export * from './locale/index';
+export * from './list/index';
+export * from './modal/public-api';
+
 @NgModule({
   exports: [
     NzButtonModule,
@@ -96,7 +99,8 @@ export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
     NzTableModule,
     NzDividerModule,
     NzFormModule,
-    NzListModule
+    NzListModule,
+    NzModalModule
   ]
 })
 export class NgZorroAntdModule {
@@ -107,7 +111,8 @@ export class NgZorroAntdModule {
       providers: [
         // Services
         NzNotificationService,
-        NzMessageService
+        NzMessageService,
+        NzModalService
       ]
     };
   }

components/modal/css-unit.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'toCssUnit'
+})
+
+export class CssUnitPipe implements PipeTransform {
+  transform(value: number | string, defaultUnit: string = 'px'): string {
+    const formatted = +value; // force convert
+    return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
+  }
+}

components/modal/demo/async.md

@@ -0,0 +1,67 @@
+---
+order: 1
+title:
+  zh-CN: 异步关闭
+  en-US: Asynchronously close
+---
+
+## zh-CN
+
+点击确定后异步关闭对话框，例如提交表单。
+
+## en-US
+
+Asynchronously close a modal dialog when a user clicked OK button, for example,
+you can use this pattern when you submit a form.
+
+````jsx
+import { Modal, Button } from 'antd';
+
+class App extends React.Component {
+  state = {
+    ModalText: 'Content of the modal',
+    visible: false,
+  }
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  }
+  handleOk = () => {
+    this.setState({
+      ModalText: 'The modal will be closed after two seconds',
+      confirmLoading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        visible: false,
+        confirmLoading: false,
+      });
+    }, 2000);
+  }
+  handleCancel = () => {
+    console.log('Clicked cancel button');
+    this.setState({
+      visible: false,
+    });
+  }
+  render() {
+    const { visible, confirmLoading, ModalText } = this.state;
+    return (
+      <div>
+        <Button type="primary" onClick={this.showModal}>Open</Button>
+        <Modal title="Title"
+          visible={visible}
+          onOk={this.handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={this.handleCancel}
+        >
+          <p>{ModalText}</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````

components/modal/demo/async.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-modal-async',
+  template: `
+    <button nz-button nzType="primary" (click)="showModal()">
+      <span>显示对话框</span>
+    </button>
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="对话框标题" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)" [nzOkLoading]="isOkLoading">
+      <p>对话框的内容</p>
+    </nz-modal>
+  `,
+  styles: []
+})
+export class NzDemoModalAsyncComponent {
+  isVisible = false;
+  isOkLoading = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk($event: MouseEvent): void {
+    this.isOkLoading = true;
+    window.setTimeout(() => {
+      this.isVisible = false;
+      this.isOkLoading = false;
+    }, 3000);
+  }
+
+  handleCancel($event: MouseEvent): void {
+    this.isVisible = false;
+  }
+}

components/modal/demo/basic.md

@@ -0,0 +1,58 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+第一个对话框。
+
+## en-US
+
+Basic modal.
+
+````jsx
+import { Modal, Button } from 'antd';
+
+class App extends React.Component {
+  state = { visible: false }
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  }
+  handleOk = (e) => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  }
+  handleCancel = (e) => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Button type="primary" onClick={this.showModal}>Open</Button>
+        <Modal
+          title="Basic Modal"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````

components/modal/demo/basic.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-modal-basic',
+  template: `
+    <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
+      <p>Content one</p>
+      <p>Content two</p>
+      <p>Content three</p>
+    </nz-modal>
+  `,
+  styles: []
+})
+export class NzDemoModalBasicComponent {
+  isVisible = false;
+
+  constructor() {}
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk($event: MouseEvent): void {
+    console.log('Button ok clicked!');
+    this.isVisible = false;
+  }
+
+  handleCancel($event: MouseEvent): void {
+    console.log('Button cancel clicked!', $event);
+    this.isVisible = false;
+  }
+}

components/modal/demo/confirm-promise.md

@@ -0,0 +1,39 @@
+---
+order: 5
+title:
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
+---
+
+## zh-CN
+
+使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
+
+## en-US
+
+To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
+delay closing the dialog.
+
+````jsx
+import { Modal, Button } from 'antd';
+const confirm = Modal.confirm;
+
+function showConfirm() {
+  confirm({
+    title: 'Do you want to delete these items?',
+    content: 'When clicked the OK button, this dialog will be closed after 1 second',
+    onOk() {
+      return new Promise((resolve, reject) => {
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'));
+    },
+    onCancel() {},
+  });
+}
+
+ReactDOM.render(
+  <Button onClick={showConfirm}>
+    Confirm
+  </Button>
+, mountNode);
+````

components/modal/demo/confirm-promise.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-modal-confirm-promise',
+  template: `
+    <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
+  `,
+  styles  : []
+})
+export class NzDemoModalConfirmPromiseComponent {
+  constructor(private modal: NzModalService) { }
+
+  showConfirm(): void {
+    this.modal.confirm({
+      nzTitle: 'Do you Want to delete these items?',
+      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
+      nzOnOk: () => new Promise((resolve, reject) => {
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'))
+    });
+  }
+}

components/modal/demo/confirm.md

@@ -0,0 +1,38 @@
+---
+order: 3
+title:
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
+---
+
+## zh-CN
+
+使用 `confirm()` 可以快捷地弹出确认框。
+
+## en-US
+
+To use `confirm()` to popup a confirmation modal dialog.
+
+````jsx
+import { Modal, Button } from 'antd';
+const confirm = Modal.confirm;
+
+function showConfirm() {
+  confirm({
+    title: 'Do you Want to delete these items?',
+    content: 'Some descriptions',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+}
+
+ReactDOM.render(
+  <Button onClick={showConfirm}>
+    Confirm
+  </Button>
+, mountNode);
+````

components/modal/demo/confirm.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-modal-confirm',
+  template: `
+    <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
+    <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
+  `,
+  styles  : []
+})
+export class NzDemoModalConfirmComponent {
+  constructor(private modalService: NzModalService) { }
+
+  showConfirm(): void {
+    this.modalService.confirm({
+      nzTitle: '<i>Do you Want to delete these items?</i>',
+      nzContent: '<b>Some descriptions</b>',
+      nzOnOk: () => console.log('OK')
+    });
+  }
+
+  showDeleteConfirm(): void {
+    this.modalService.confirm({
+      nzTitle: 'Are you sure delete this task?',
+      nzContent: '<b style="color: red;">Some descriptions</b>',
+      nzOkText: 'Yes',
+      nzOkType: 'danger',
+      nzOnOk: () => console.log('OK'),
+      nzCancelText: 'No',
+      nzOnCancel: () => console.log('Cancel')
+    });
+  }
+}