@govbr-ds/core

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Modal</title>  <link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>  <link rel="stylesheet" href="../../core.css"/>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/> </head> <body> <div class="container-fluid"> <p class="h4 mt-5">Exemplo de uso do Scrim com o componente Modal</p> <div class="br-scrim-util foco" id="scrimutilexamplemodal" data-scrim="true"> <div class="br-modal" aria-labelledby="titulomodalexemplo"> <div class="br-modal-header" id="titulomodalexemplo">Modal com scrim</div> <div class="br-modal-body"> <p>Exemplo utilizando o componente scrim com FOCO</p> </div> <div class="br-modal-footer justify-content-center"> <button class="br-button secondary" type="button" id="scrimfechar" data-dismiss="true">Cancelar </button> <button class="br-button primary mt-3 mt-sm-0 ml-sm-3" type="button">Retornar </button> </div> </div> </div> <div class="scrimutilsample"> <button class="br-button primary" type="button" id="buttonactivatemodal">Testar o Modal com o Scrim </button> </div> <p class="h4 mt-5">Modal Alerta</p> <div class="div br-modal medium" aria-modal="true" role="dialog" aria-labelledby="modalalerttitle"> <div class="br-modal-header"> <div class="modal-title" id="modalalerttitle">Título da modal</div> <button class="br-button close circle" type="button" data-dismiss="br-modal" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="br-modal-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus commodi laboriosam vel sequi quam deleniti, laborum mollitia blanditiis dolores officiis nulla quos dolorem repellat in nisi alias nesciunt fugit. Similique!</p> </div> <div class="br-modal-footer justify-content-end"> <button class="br-button secondary" type="button">Ação 1 </button> <button class="br-button primary ml-2" type="button">Ação2 </button> </div> </div> <p class="h4 mt-5">Modal com duas ou mais linhas de título</p> <div class="div br-modal small" aria-modal="true" role="dialog" aria-labelledby="modaltitlelines"> <div class="br-modal-header"> <div class="modal-title" id="modaltitlelines">Título do modal de exemplo com uso de duas linhas, título do modal de exemplo com uso de duas linhas</div> <button class="br-button close circle" type="button" data-dismiss="br-modal" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="br-modal-body"> <p> Texto com duas linhas Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="br-modal-footer justify-content-center"> <button class="br-button secondary" type="button">Ação 1 </button> <button class="br-button primary ml-2" type="button">Ação 2 </button> </div> </div> <p class="h4 mt-5">Modal com Temporizador</p> <div class="div br-modal xsmall" aria-modal="true" role="dialog" aria-label="Carregando Conteúdo"> <div class="br-modal-body loading medium"> </div> <div class="br-modal-footer justify-content-around"> <button class="br-button secondary" type="button">Cancelar </button> </div> </div> <p class="h4 mt-5">Modal sem título</p> <div class="div br-modal medium" aria-modal="true" role="dialog" aria-label="Exemplo de modal sem título" aria-describedby="untitledmodal"> <div class="br-modal-body" id="untitledmodal"> <p>Modal de alerta sem título Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="br-modal-footer justify-content-end"> <button class="br-button secondary" type="button">Ação 1 </button> <button class="br-button primary ml-2" type="button">Ação 2 </button> </div> </div> <p class="h4 mt-5">Modal com escolha de opção</p> <div class="div br-modal small" aria-modal="true" role="dialog" aria-labelledby="modaloptionstitle"> <div class="br-modal-header"> <div class="modal-title" id="modaloptionstitle">Título</div> <button class="br-button close circle" type="button" data-dismiss="br-modal" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="br-modal-body"> <div class="br-radio d-block"> <input id="op-fotos" type="radio" name="op" value="op-fotos"/> <label for="op-fotos">Fotos</label> </div> <div class="br-radio d-block mt-1"> <input id="op-filmes" type="radio" name="op" value="op-filmes" checked="checked"/> <label for="op-filmes">Filmes</label> </div> <div class="br-radio d-block mt-1"> <input id="op-audio" type="radio" name="op" value="op-audio"/> <label for="op-audio">Áudio</label> </div> <div class="br-radio d-block mt-1"> <input id="op-todas" type="radio" name="op" value="op-todas"/> <label for="op-todas">Todas</label> </div> </div> <div class="br-modal-footer justify-content-center"> <button class="br-button secondary" type="button">Ação 1 </button> <button class="br-button primary ml-2" type="button">Ação 2 </button> </div> </div> <p class="h4 mt-5">Modal com entrada de dados</p> <div class="div br-modal large" aria-modal="true" role="dialog" aria-labelledby="modallogintitle"> <div class="br-modal-header"> <div class="modal-title" id="modallogintitle">Título</div> <button class="br-button close circle" type="button" data-dismiss="br-modal" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="br-modal-body"> <div class="br-select"> <div class="br-input"> <label for="auth-dominio">Domínio da autenticação</label> <input id="auth-dominio" type="text" placeholder="Placeholder"/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="opt-548" type="radio" name="value" value="opt-548"/> <label for="opt-548">GOV.BR</label> </div> </div> </div> </div> <div class="mt-3"> <div class="br-input"> <label for="auth-usuario">Usuário</label> <input id="auth-usuario" type="text" placeholder="Insira um texto"/> </div> </div> <div class="mt-3"> <div class="br-input input-button"> <label for="input-password">Senha</label> <input id="input-password" type="password" placeholder="Digite sua senha"/> <button class="br-button" type="button" aria-label="Exibir senha" role="switch" aria-checked="false"><i class="fas fa-eye" aria-hidden="true"></i> </button> </div> </div> </div> <div class="br-modal-footer justify-content-center"> <button class="br-button secondary" type="button">Cancelar </button> <button class="br-button primary ml-2" type="button" disabled="disabled">Finalizar </button> </div> </div> <p class="h4 mt-5">Modal com lista de opções</p> <div class="div br-modal xsmall" aria-modal="true" role="dialog" aria-labelledby="modallisttitle"> <div class="br-modal-header"> <div class="modal-title" id="modallisttitle">Título</div> <button class="br-button close circle" type="button" data-dismiss="br-modal" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="br-modal-body"> <div class="br-list"><a class="br-item" href="javascript:void(0)"> <div class="row align-items-center"> <div class="col-auto"><img class="rounded" src="https://picsum.photos/40/40" alt="imagem de exemplo 1"/></div> <div class="col">Opção 1</div> </div></a><span class="br-divider"></span><a class="br-item" href="javascript:void(0)"> <div class="row align-items-center"> <div class="col-auto"><img class="rounded" src="https://picsum.photos/40/40" alt="imagem de exemplo 1"/></div> <div class="col">Opção 2</div> </div></a><span class="br-divider"></span><a class="br-item" href="javascript:void(0)"> <div class="row align-items-center"> <div class="col-auto"><img class="rounded" src="https://picsum.photos/40/40" alt="imagem de exemplo 1"/></div> <div class="col">Opção 3</div> </div></a> </div> </div> </div> <p class="h4 mt-5">Modal com termo de aceite</p> <div class="div br-modal large" aria-modal="true" role="dialog" aria-labelledby="modaltermstitle"> <div class="br-modal-header" id="modaltermstitle">Concorda com os termos? </div> <div class="br-modal-body"> <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris id gravida nulla. Cras sagittis dapibus felis vitae semper. Donec vel hendrerit ante. Etiam sed blandit nisi. Praesent iaculis, nisl eget rutrum vehicula, lacus tortor feugiat diam, et euismod lacus metus eget nisi. Sed fermentum, nunc nec efficitur pharetra, felis dolor feugiat massa, et semper turpis felis quis ligula. Quisque non metus at risus maximus ultrices. Nam vel massa tellus. Vestibulum lobortis dui et pellentesque porta. Cras rhoncus augue a mauris porttitor, in malesuada metus eleifend. Praesent ac lacinia lorem. Sed cursus nisl ligula, vel ultrices ex pellentesque eu. Curabitur facilisis egestas libero, non pharetra lacus ultricies quis. Mauris non finibus justo, eu varius metus. Donec nec eros semper, consequat turpis id, fermentum dolor.</p> <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris id gravida nulla. Cras sagittis dapibus felis vitae semper. Donec vel hendrerit ante. Etiam sed blandit nisi. Praesent iaculis, nisl eget rutrum vehicula, lacus tortor feugiat diam, et euismod lacus metus eget nisi. Sed fermentum, nunc nec efficitur pharetra, felis dolor feugiat massa, et semper turpis felis quis ligula. Quisque non metus at risus maximus ultrices. Nam vel massa tellus. Vestibulum lobortis dui et pellentesque porta. Cras rhoncus augue a mauris porttitor, in malesuada metus eleifend. Praesent ac lacinia lorem. Sed cursus nisl ligula, vel ultrices ex pellentesque eu. Curabitur facilisis egestas libero, non pharetra lacus ultricies quis. Mauris non finibus justo, eu varius metus. Donec nec eros semper, consequat turpis id, fermentum dolor.</p> <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris id gravida nulla. Cras sagittis dapibus felis vitae semper. Donec vel hendrerit ante. Etiam sed blandit nisi. Praesent iaculis, nisl eget rutrum vehicula, lacus tortor feugiat diam, et euismod lacus metus eget nisi. Sed fermentum, nunc nec efficitur pharetra, felis dolor feugiat massa, et semper turpis felis quis ligula. Quisque non metus at risus maximus ultrices. Nam vel massa tellus. Vestibulum lobortis dui et pellentesque porta. Cras rhoncus augue a mauris porttitor, in malesuada metus eleifend. Praesent ac lacinia lorem. Sed cursus nisl ligula, vel ultrices ex pellentesque eu. Curabitur facilisis egestas libero, non pharetra lacus ultricies quis. Mauris non finibus justo, eu varius metus. Donec nec eros semper, consequat turpis id, fermentum dolor.</p> </div> <div class="br-modal-footer justify-content-center"> <button class="br-button secondary" type="button">Negar </button> <button class="br-button primary ml-2" type="button">Aceitar </button> </div> </div> </div> <script src="../../core-init.js"></script> </body> </html>