Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

This demo uses fixed dialog widths to show different sizes: 512px, 700px, and 992px.

Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch Submit

Utilize the Material UI grid system within a modal by nesting Grid container within the Dialog. Then, use the normal grid system classes as you would anywhere else.

{{'<'}}div style="display: flex; justify-content: flex-end"{{'>'}}
  {{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}/mat-grid-list{{'>'}}
{{'<'}}/div{{'>'}}

{{'<'}}div{{'>'}}
  {{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}/mat-grid-list{{'>'}}
{{'<'}}/div{{'>'}}

{{'<'}}div{{'>'}}
  {{'<'}}mat-grid-list cols="3" rowHeight="52" gutterSize="24"{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
    {{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}
      {{'<'}}div{{'>'}}{{'<'}}span{{'>'}}3{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}
    {{'<'}}/mat-grid-tile{{'>'}}
  {{'<'}}/mat-grid-list{{'>'}}
{{'<'}}/div{{'>'}}