fix(modal): bg color ion-page.modal

Closes #389

ionic/components/modal/modal.scss

@@ -2,11 +2,13 @@
 // Modals
 // --------------------------------------------------
 
-$modal-background-color:          #fff !default;
+$modal-background-color:          $background-color !default;
 
-$modal-inset-mode-break-point:    680px !default;  // @media min-width
+
-$modal-inset-mode-top:            20% !default;
+ion-page.modal {
-$modal-inset-mode-right:          20% !default;
+  background-color: $modal-background-color;
-$modal-inset-mode-bottom:         20% !default;
+  z-index: $z-index-overlay;
-$modal-inset-mode-left:           20% !default;
+
-$modal-inset-mode-min-height:     240px !default;
+  // hidden by default to prevent flickers, the animation will show it
+  transform: translate3d(0px, 100%, 0px);
+}

ionic/components/modal/test/basic/index.ts

@@ -27,10 +27,13 @@ class MyAppCmp {
     platform.ready().then(() => {
       console.log('platform.ready')
     });
-
   }
 
   openModal() {
+    this.modal.open(PlainPage);
+  }
+
+  openModalChildNav() {
     this.modal.open(ContactModal, {
       handle: 'my-awesome-modal'
     });
@@ -44,10 +47,27 @@ class MyAppCmp {
   }
 }
 
+
+@Page({
+  template: `
+    <p>Plain Page in a modal</p>
+    <p>Not inside of ion-content</p>
+    <p><button (click)="closeModal()">Close Modal</button></p>
+  `
+})
+class PlainPage {
+  constructor(private modal: Modal) {}
+
+  closeModal() {
+    this.modal.get().close();
+  }
+}
+
+
 @Page({
   template: '<ion-nav [root]="rootView"></ion-nav>'
 })
-export class ContactModal {
+class ContactModal {
   constructor() {
     console.log('ContactModal constructor')
     this.rootView = ModalFirstPage;
@@ -94,7 +114,7 @@ export class ContactModal {
     </ion-content>
   `
 })
-export class ModalFirstPage {
+class ModalFirstPage {
   constructor(
     nav: NavController,
     modal: Modal,
@@ -158,7 +178,7 @@ export class ModalFirstPage {
     </ion-content>
   `
 })
-export class ModalSecondPage {
+class ModalSecondPage {
   constructor(
     nav: NavController,
     params: NavParams
@@ -181,7 +201,6 @@ class FadeIn extends Animation {
       .fadeIn();
   }
 }
-
 Animation.register('my-fade-in', FadeIn);
 
 class FadeOut extends Animation {
@@ -193,5 +212,4 @@ class FadeOut extends Animation {
       .fadeOut();
   }
 }
-
 Animation.register('my-fade-out', FadeOut);

ionic/components/modal/test/basic/main.html

@@ -1,10 +1,14 @@
 
 <ion-content padding>
-  <button class="e2eOpenModal" (click)="openModal()">Modal: Default Animation</button>
+  <p>
-</ion-content>
+    <button class="e2eOpenModal" (click)="openModalChildNav()">Open modal w/ child ion-nav</button>
-
+  </p>
-<ion-content padding>
+  <p>
+    <button (click)="openModal()">Open plain modal</button>
+  </p>
+  <p>
     <button (click)="openModalCustomAnimation()">Modal: Custom Animation</button>
+  </p>
 </ion-content>
 
 <ion-overlay></ion-overlay>

ionic/components/overlay/overlay-controller.ts

@@ -40,6 +40,7 @@ export class OverlayController {
           }
         }
         this.renderer.setElementStyle(ref.location, 'zIndex', ref._z);
+        this.renderer.setElementAttribute(ref.location, 'role', 'dialog');
 
         util.extend(instance, opts);
 
@@ -59,7 +60,7 @@ export class OverlayController {
         if (this.config.get('animate') === false) {
           animation.duration(0);
         }
-        animation.before.addClass('show-overlay');
+        animation.before.addClass(overlayType);
 
         this.app.setEnabled(false, animation.duration());
         this.app.setTransitioning(true, animation.duration());
@@ -103,7 +104,6 @@ export class OverlayController {
     if (this.config.get('animate') === false) {
       animation.duration(0);
     }
-    animation.after.removeClass('show-overlay');
 
     this.app.setEnabled(false, animation.duration());
     this.app.setTransitioning(true, animation.duration());

ionic/components/overlay/overlay.ts

@@ -5,7 +5,7 @@ import {OverlayController} from './overlay-controller';
 
 @Component({
   selector: 'ion-overlay',
-  template: ''
+  template: '<template #contents></template>'
 })
 export class OverlayAnchor {
   constructor(
@@ -23,7 +23,7 @@ export class OverlayAnchor {
   }
 
   append(componentType) {
-    return this.loader.loadNextToLocation(componentType, this.elementRef).catch(err => {
+    return this.loader.loadIntoLocation(componentType, this.elementRef, 'contents').catch(err => {
       console.error(err);
     });
   }