Modais são janelas com conteúdos que se sobrepõe à tela anterior bloqueando-a. Geralmente uma camada cinza translúcida separa a modal da tela anterior. Uma vez concluída a ação da modal ou simplesmente fechando-a a tela anterior é novamente apresentada para utilização.

b.1) Dimensões:          

            Header: 30px

            Distância entre o Header e o início do conteúdo: 20px

            Distância entre o fim do conteúdo e a margem inferior: 30px

            Margens esquerda e direita: 20px

            Largura mínima da modal: 550px

 b.2) Cores:

            Header: 6

            Background: 8

            Opacidade do fundo da modal: preto (25% de transparência)

 b.3) Textos:

             Título: OSsb/15 (4)

Deve-se optar por modais quando a quantidade de informações contidas nela não é grande o bastante, a fim de evitar grandes rolagens verticais. Para telas mais complexas e com maior conteúdo é preferível optar pela abertura de uma nova aba no browser. Para conteúdos simples e pequenos formulários e textos, a modal é indicada.

A modal é indicada para "atalhos" do fluxo principal de navegação, sobretudo quando é necessário "paralisar" a navegação até que uma ação seja terminada dentro de uma modal.

Há várias maneiras de finalizar uma modal:

1- Clicando no ícone de fechar, no topo à direita;
2- Clicando em qualquer área fora da modal;
3- Clicando em um botão (caso haja) que realize alguma ação que finalize a modal.