Modal Dialogs

Small Dialog

Expected keyboard interactions:

Esc key closes the modal and moves focus to whatever triggered the modal to open

Enter key submits modal’s form data, if applicable

Change Log Level

Sit nulla est ex deserunt exercitation anim occaecat.

Cancel
Save
.layer-under{
    background: #363636;
    opacity: 0.5;
}	
.small-dialog{
    height: 250px;
    width: 500px;
    display: block;
    background: #fff;
    text-align: left;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
    border-top: solid 7px #2980bf;
    padding: 20px 40px;
    line-height: 18px;
    font-size: 13px;
    font-family: tableau_regular;
 }
.small-dialog_title{
    padding-bottom: 20px;
    line-height: 24px;
    font-size: 22px;
    font-family: tableau_regular;
 }
.close-btn{
    height: 12px;
    width: 12px;
    color: #666;
 }
 .close-btn:hover {
    alpha: 0.3;
 }

Big Dialog

Expected keyboard interactions:

Esc key closes the modal and moves focus to whatever triggered the modal to open

Enter key submits modal’s form data, if applicable

Monitor Application

Monitor an application's health, usage and activities. Learn More

Cancel
Monitor
.layer-under{
    background: #363636;
    opacity: 0.5;
}	
.big-dialog{
    height: 450px;
    width: 700px;
    display: block;
    background: #fff;
    text-align: left;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
    border-top: solid 7px #2980bf;
    padding: 20px 40px;
    line-height: 18px;
    font-size: 13px;
    font-family: tableau_regular;
 }
.big-dialog_title{
    padding-bottom: 20px;
    line-height: 24px;
    font-size: 22px;
    font-family: tableau_regular;
 }
.close-btn{
    height: 12px;
    width: 12px;
    color: #666;
 }
 .close-btn:hover {
    alpha: 0.3;
 }