title: Modal/Dialog is opening at the bottom of the screen, and not behaving properly
body: <p>Like the question says, my dialog is popping up on the bottom of the screen, rather than in the middle.  It also does not close on click, but rather whenever I hit escape.  The rest of the page is also not disabled or grayed out, so I can stack them up (see below).</p>
  
  <p><a href="https://i.stack.imgur.com/13Ur7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/13Ur7.png" alt="enter image description here"></a></p>
  
  <p>I'm using basically the exact same code as in the example</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {MdDialog, MdDialogRef} from '@angular/material';
  
  @Component({
      selector: 'dialog-overview-example',
      template: '&lt;button md-button (click)="openDialog()"&gt;Open dialog&lt;/button&gt;'
  })
  export class DialogOverviewExample {
      constructor(public dialog: MdDialog) {}
  
      public openDialog(): void {
          this.dialog.open(BasicDialog);
      }
  }
  
  @Component({
      selector: 'dialog-overview-example-dialog',
      template: "&lt;p&gt; Hi, I'm a dialog! &lt;/p&gt;",
  })
  export class BasicDialog {}
  </code></pre>
  
  <p>I think my imports are correct, but here they are:</p>
  
  <pre><code>imports: [
      BrowserModule,
      FormsModule,
      RouterModule.forRoot(ROUTES, {useHash: true}),
      MdDialogModule,
      BrowserAnimationsModule,
      ReactiveFormsModule,
      FormsModule,
      CommonModule
  ],
  </code></pre>
  
  <p>Note that there is no error or warning in the console, and I have tried disabling css.</p>
  
  <p>Anyone seen this before?</p>