feat(modal): upgrade modal to v4-alpha.6

refs #1178 Closes #1185
ng-bootstrap · Jan 9, 2017 · 7ab022b · 7ab022b
1 parent 4499927
commit 7ab022b
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/demo/src/app/components/modal/demos/basic/modal-basic.html b/demo/src/app/components/modal/demos/basic/modal-basic.html
@@ -1,9 +1,9 @@
 <template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
+    <h4 class="modal-title">Modal title</h4>
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
       <span aria-hidden="true">&times;</span>
     </button>
-    <h4 class="modal-title">Modal title</h4>
   </div>
   <div class="modal-body">
     <p>One fine body&hellip;</p>

diff --git a/demo/src/app/components/modal/demos/component/modal-component.ts b/demo/src/app/components/modal/demos/component/modal-component.ts
@@ -6,10 +6,10 @@ import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
   selector: 'ngbd-modal-content',
   template: `
     <div class="modal-header">
+      <h4 class="modal-title">Hi there!</h4>
       <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
         <span aria-hidden="true">&times;</span>
       </button>
-      <h4 class="modal-title">Hi there!</h4>
     </div>
     <div class="modal-body">
       <p>Hello, {{name}}!</p>

diff --git a/demo/src/app/components/modal/demos/customclass/modal-customclass.html b/demo/src/app/components/modal/demos/customclass/modal-customclass.html
@@ -1,9 +1,9 @@
 <template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
+    <h4 class="modal-title">Modal title</h4>
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
       <span aria-hidden="true">&times;</span>
     </button>
-    <h4 class="modal-title">Modal title</h4>
   </div>
   <div class="modal-body">
     <p>One fine body&hellip;</p>

diff --git a/demo/src/app/components/modal/demos/customclass/modal-customclass.ts b/demo/src/app/components/modal/demos/customclass/modal-customclass.ts
@@ -8,9 +8,12 @@ import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
   encapsulation: ViewEncapsulation.None,
   styles: [`
     .dark-modal .modal-content {
-      background-color: black;
+      background-color: #292b2c;
       color: white;
     }
+    .dark-modal .close {
+      color: white;   
+    }
   `]
 })
 export class NgbdModalCustomclass {

diff --git a/src/modal/modal-backdrop.ts b/src/modal/modal-backdrop.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
 
-@Component({selector: 'ngb-modal-backdrop', template: '', host: {'class': 'modal-backdrop fade in'}})
+@Component({selector: 'ngb-modal-backdrop', template: '', host: {'class': 'modal-backdrop fade show'}})
 export class NgbModalBackdrop {
 }
diff --git a/src/modal/modal-window.ts b/src/modal/modal-window.ts
@@ -15,7 +15,7 @@ import {ModalDismissReasons} from './modal-dismiss-reasons';
 @Component({
   selector: 'ngb-modal-window',
   host: {
-    '[class]': '"modal fade in" + (windowClass ? " " + windowClass : "")',
+    '[class]': '"modal fade show" + (windowClass ? " " + windowClass : "")',
     'role': 'dialog',
     'tabindex': '-1',
     'style': 'display: block;',