Ir ao conteúdo
  • Cadastre-se

EddK

Membro Pleno
  • Total de itens

    20
  • Cadastrado em

  • Última visita

  • Qualificações

    0%
  1. Há algum problema em adicionar valores de class em vez de id nos atributos aria-labelledby e aria-describedby? Isso afetará algo em relação à acessibilidade? Por exemplo: <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 class="title">Título 1</h2> <p class="description">Informação 1</p> <button class="close" aria-label="close">x</button> </div>
  2. @washalbano ok, obrigado
  3. @washalbanoNotei que foi adicionado id="title" e id="description" apenas no primeiro template. As demais não possuem. Minha dúvida fica quanto a questão de acessibilidade (wai-aria) nesses sem ids.
  4. Alguém pode me ajudar? Estou começando em JavaScript. Qual alteração ou adição de código é preciso para conseguir a navegação com o teclado Tab no modal aberto? Ex.: navegar entre os botões copiar, acessar e close? Obs.: Lembrando que no código abaixo consigo sair do modal com esc ou enter. Segue o código: HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> </head> <body> <button class="trigger">Abrir 1</button> <div class="cover"></div> <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 class="title">Título 1</h2> <p class="description">Informação 1</p> <button>Copiar</button> <button>Acessar</button> <button class="close" aria-label="close">&times;</button> </div> </body> </html> CSS: [role="dialog"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 1em; max-height: 30vh; max-width: 50vw; background: #ddd; box-shadow: 0.25em 0.25em #aaa; display: none; border: 0; } [role="dialog"] *+* { margin-top: 0.5em; } .title { font-weight: bold; } button { cursor: pointer; background: #215990; border: 0; color: #fff; padding: 0.125em 0.5em; } button:focus, button:hover { outline: 3px solid #d4aa00; } .close { position: absolute; top: 0.5em; right: 0.5em; margin-top: 0; line-height: 1; } [role="dialog"][open=""] { display: block; } .cover { background: green; opacity: 0.75; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: none; } JAVASCRIPT: var trigger = document.querySelectorAll('.trigger'); var dialog = document.querySelectorAll('.dialog'); var close = document.querySelectorAll('.close'); function openDialog(dialogIndex) { dialog[dialogIndex].setAttribute('open', ''); close[dialogIndex].focus(); close[dialogIndex].addEventListener('keydown', function(e) { if (e.keyCode == 9) { e.preventDefault(); } }); document.querySelectorAll('.cover')[dialogIndex].style.display = 'block'; document.addEventListener('keydown', addESC); } function closeDialog(dialogIndex) { dialog[dialogIndex].removeAttribute('open'); trigger[dialogIndex].focus(); document.querySelectorAll('.cover')[dialogIndex].style.display = 'none'; document.removeEventListener('keydown', addESC); } var addESC = function(e) { if (e.keyCode == 27) { closeDialog(Array.from(dialog).indexOf(document.querySelector('[role="dialog"][open]'))); } }; trigger.forEach((element, i) => { element.addEventListener('click', function() { openDialog(i); }); }); close.forEach((element, i) => { element.addEventListener('click', function() { closeDialog(i); }); }); Desde já muito obrigado
  5. Conforme segue o código abaixo, consigo ter apenas um botão e um modal. Como faço para ter outros modais com outros botões na mesma página? Alguém pode me ajudar? Sou novo em JavaScript, mas vejo que o código JS pega o id (trigger) do botão, se eu adicionar outro botão e janela modal com outro id ele não vai reconhecer. JAVASCRIPT: var trigger = document.getElementById('trigger'); var dialog = document.getElementById('dialog'); var close = document.getElementById('close'); function openDialog() { dialog.setAttribute('open', ''); close.focus(); close.addEventListener('keydown', function(e) { if (e.keyCode == 9) { e.preventDefault(); } }); document.getElementById('cover').style.display = 'block'; document.addEventListener('keydown', addESC); } function closeDialog() { dialog.removeAttribute('open'); trigger.focus(); document.getElementById('cover').style.display = 'none'; document.removeEventListener('keydown', addESC); } var addESC = function(e) { if (e.keyCode == 27) { closeDialog(); } }; trigger.addEventListener('click', function() { openDialog(); }); close.addEventListener('click', function() { closeDialog(); }); CSS: [role="dialog"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 1em; max-height: 30vh; max-width: 50vw; background: #ddd; box-shadow: 0.25em 0.25em #aaa; display: none; border: 0; } [role="dialog"] * + * { margin-top: 0.5em; } #title { font-weight: bold; } button { cursor: pointer; background: #215990; border: 0; color: #fff; padding: 0.125em 0.5em; } button:focus, button:hover { outline: 3px solid #d4aa00; } #close { position: absolute; top: 0.5em; right: 0.5em; margin-top: 0; line-height: 1; } [role="dialog"][open] { display: block; } #cover { background: green; opacity: 0.75; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: none; } HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> </head> <body> <button id="trigger">Abrir</button> <div id="cover"></div> <div id="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 id="title">Título</h2> <p id="description">Informação</p> <button id="close" aria-label="close">&times;</button> </div> </body> </html>
  6. Boa tarde! Estou com alguns problemas: 1 - ao abrir a janela modal, o foco fique somente nesta janela (ao pressionar a tecla tab - a seleção não sai dessa janela principal) até fechar. 2 - ao fechar a janela modal, o foco fique no botão que acionou anteriormente o modal. 3 - preciso adicionar wai-aria no código (aria-label e role) Alguém consegue me ajudar? Desde já obrigado Segue o código: HTML: <body> <button class="trigger" onclick="showModal()">HelloWorld</button> <div class="modal" id="modal"> <div class="modal-content"> <span class="close-button" onclick="closeModal()"> &times; </span> <h1>Hello World</h1> </div> </div> </body> CSS: .modal{ position: fixed; top:0; left:0; padding:0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0.25s ease-in-out , opacity 0.25s ease-in-out, transform 0.25s ease-in-out; } .modal-content{ background-color: white; padding: 16px 24px; width: 384px; border-radius: 0.5rem; } .close-button{ float: right; width: 24px; line-height: 24px; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover{ background-color: darkgray; } .show-modal{ opacity: 1; visibility: visible; transform: scale(1.0); } JAVASCRIPT: function showModal() { var element = document.getElementById("modal"); element.classList.add("show-modal"); } function closeModal() { var element = document.getElementById("modal"); element.classList.remove("show-modal"); }
  7. @GusTec Alguma outra forma para ter menos códigos?
  8. @GusTec Alguma dica de como criar esse identificador (para apontar o último grid da direita e último da parte de baixo)?
  9. Boa noite! Alguém sabe como criar essas box com bordas: fonte: meucupom.com/categorias obs.: achei muito interessante o sistema
  10. @Marcelo Calazans Adicionei apenas os medias... por isso deu errado. Agora está perfeito.
  11. @Marcelo Calazans Você sabe como centralizar o box modal na vertical?
  12. Boa tarde! Alguém sabe como criar esse tipo de efeito responsivo em html5 e css3 (segue em anexo o modelo). Site de referencia: m.kohls.com/sale-event/coupons-deals.jsp
  13. Boa tarde! Criei uma box modal, mas tenho alguns problemas: - não consigo deixar o modal (responsivo) - não consigo centralizar verticalmente o modal (preciso que centralize conforme o aparelho (desktop, tablet e celular). segue o código: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <title>Modal</title> <style> .modal-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modal-wrap:target { opacity: 1; pointer-events: auto; } .modal-wrap>div { width: 560px; position: relative; margin: 0 auto; padding: 20px 10px; background: #fff; } .modal-content__descript { display: block; width: 100%; } .modal-content__descript p { color: #666; font-size: 12px; margin: 10px 0; height: 50px; padding: 30px 10px; } .close { position: absolute; width: 30px; right: 20px; top: 20px; text-align: center; line-height: 30px; font-size: 20px; color: #333; text-decoration: none; } </style> </head> <body> <div> <a href="#code-1">acessar modal</a> </div> <div class="modal"> <div id="code-1" class="modal-wrap"> <div class="modal-content"> <div class="modal-content__descript"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p> </div> <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a> </div> </div> </div> </body> </html> Desde já muito obrigado
  14. @Marcelo Calazans Obrigado pela dica
  15. Como faço para adicionar o texto (ver cupom) do botão? @Marcelo Calazans

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!