Caixas de diálogo da caixa de luz

O widget Lightbox permite que os usuários visualizem o conteúdo multimídia em caixas de diálogo modais.

Uso geral

Este é um botão de exemplo que abre uma caixa de diálogo Lightbox:

Diagrama de estado

Esta é uma tag âncora com seu atributo href definido como #lightbox-trigger e também pode ser usada para abrir um Lightbox:

Mostrar imagem

Diagrama de estado

Vídeos do YouTube

Este é um botão de amostra que abre uma caixa de diálogo de vídeo do YouTube:

Este é um link do YouTube que abre uma caixa de diálogo de vídeo do YouTube:

Assista vídeo

Imagens

As imagens também podem ser exibidas nas caixas de diálogo modais do Lightbox. Isso funciona especialmente bem para ver os detalhes de uma captura de tela sem precisar adicionar uma imagem de largura total.

Flutuou à direita

Exemplo de carrinho

Este é um exemplo de uma imagem que flutua à direita do conteúdo que precede. Este widget abre uma caixa de diálogo modal Lightbox e exibe a dica de ferramenta Exemplo de carrinho .

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oficia deserunt mollit anim id est laborum.

Flutuou para a esquerda

Este é um exemplo de uma imagem que flutua à esquerda do conteúdo que precede. Este widget abre uma caixa de diálogo modal Lightbox, mas não exibe uma dica de ferramenta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oficia deserunt mollit anim id est laborum.

Mostrar no carregamento da página

Você pode ter um Lightbox que é aberto no carregamento da página adicionando o parâmetro de string de consulta dialogOnLoad junto com o postfix do ID.

Diagrama de estado