fix(overlay): make overlay work in fullscreen mode

src/demo-app/demo-app/demo-app.html

@@ -25,6 +25,9 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material 2 Demos</h1>
+        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+          Fullscreen
+        </button>
         <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
           {{root.dir.toUpperCase()}}
         </button>

src/demo-app/demo-app/demo-app.scss

@@ -23,6 +23,13 @@ body {
     padding: 32px;
   }
 
+  // stretch to screen size in fullscreen mode
+  .demo-content:fullscreen {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+  }
+
   md-toolbar {
     md-icon {
       cursor: pointer;

src/demo-app/demo-app/demo-app.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
 
 
 @Component({
@@ -47,4 +47,21 @@ export class DemoApp {
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'}
   ];
+
+  constructor(private _element: ElementRef) {
+
+  }
+
+  public toggleFullscreen() {
+    let elem = this._element.nativeElement.querySelector('.demo-content');
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullscreen) {
+      elem.msRequestFullscreen();
+    }
+  }
 }

src/lib/core/overlay/overlay-container.ts

@@ -23,7 +23,35 @@ export class OverlayContainer {
   private _createContainer(): void {
     let container = document.createElement('div');
     container.classList.add('md-overlay-container');
-    document.body.appendChild(container);
     this._containerElement = container;
+    this._adjustContainerParent();
+    if (document.fullscreenEnabled) {
+      document.addEventListener('fullscreenchange', () => this._adjustContainerParent());
+    }
+    if (document.webkitFullscreenEnabled) {
+      document.addEventListener('webkitfullscreenchange', () => this._adjustContainerParent());
+    }
+    if ((<any>document).mozFullScreenEnabled) {
+      document.addEventListener('mozfullscreenchange', () => this._adjustContainerParent());
+    }
+    if ((<any>document).msFullscreenEnabled) {
+      document.addEventListener('MSFullscreenChange', () => this._adjustContainerParent());
+    }
+  }
+
+  private _adjustContainerParent() {
+    // use any type because document type doesn't declare full screen variables
+    let currentDocument: any = document;
+    if (currentDocument.fullscreenElement) {
+      currentDocument.fullScreenElement.appendChild(this._containerElement);
+    } else if (currentDocument.mozFullScreenElement) {
+      currentDocument.mozFullScreenElement.appendChild(this._containerElement);
+    } else if (currentDocument.webkitFullscreenElement) {
+      currentDocument.webkitCurrentFullScreenElement.appendChild(this._containerElement);
+    } else if (currentDocument.msFullscreenElement) {
+      currentDocument.msFullscreenElement.appendChild(this._containerElement);
+    } else {
+      document.body.appendChild(this._containerElement);
+    }
   }
 }