Javascript Alterar JavaScript para adicionar mais botões e modais

EddK · 28 de agosto de 2021

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>

washalbano · 29 de agosto de 2021

Olá!
Há muitas formas possível de se resolver (se é que eu entendi)
Não "pegue" o botão pela id.
É possível, por exemplo definir um role (papel) para os elementos html.
Veja se consegues entender esta sugestão:
HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modals</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<button id="trigger" role="modal-open" data-modal="body-1">Abrir 1</button>
<button role="modal-open" data-modal="body-2">Abrir 2</button>
<button role="modal-open" data-modal="body-3">Abrir 3</button>
<button role="modal-open" data-modal="body-4">Abrir 4</button>

<div id="cover"></div>
<div id="dialog" role="dialog" aria-labelledby="title" aria-describedby="description" class="fadeIn animated">
  <button id="close" aria-label="close">&times;</button>
  <div id="modal-body"></div>
</div>

<template id="modal-body-1">
  <h2 id="title">Título</h2>
  <p id="description">Informação</p>
</template>
<template id="modal-body-2">
  <h2>Título 2</h2>
  <p>Informação 2</p>
</template>
<template id="modal-body-3">
  <h2>Título 3</h2>
  <p>Informação 3</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi ducimus earum eos impedit laudantium nisi nobis odit sapiente similique? Assumenda consequatur ipsum maiores pariatur praesentium rerum saepe sapiente voluptatem.</p>
</template>
<template id="modal-body-4">
  <h2>Título 4</h2>
  <p>Informação 4</p>
</template>

<script src="assets/js/app.js"></script>
</body>
</html>

JS

var trigger = document.getElementById('trigger');
var dialog = document.getElementById('dialog');
var close = document.getElementById('close');

// define o corpo da modal
let modalBody = document.getElementById('modal-body');

// percorre o html e guarda todos os elementos com role=modal-open na variável modalOpeners
let modalOpeners = document.querySelectorAll('[role="modal-open"]');

// percorre modalOpeners e adiciona um listen para cada elemento econtrado
for (let element of modalOpeners) {
    element.addEventListener('click', function (e) {
        e.preventDefault()
        // coloca o conteúdo do referido modalOpener na modal
        modalBody.innerHTML = document.getElementById('modal-' + this.dataset.modal).innerHTML
        openDialog();
    });

}

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();
});

Pra ficar mais rápido e prático zipei o conteúdo no arquivo que segue em anexo.

modais.zip

EddK · 2 de setembro de 2021

@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.

@washalbano Outra dúvida: se for adicionado botão ou link (botão) no description da tag template, como faço para navegar com o teclado entre eles (botao, link e close) apenas, sem sair do modal (template)?