Modal

例えば、実施形態のために、

ここに見えるすべてのモード1、モード2、モード3
選びたいときはこの方法を使います.

const btnsOpenModal = document.querySelectorAll('.show-modal');

全部貼って~

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

このように隠れています.
removeとaddはこのような関数です
きおく

for (let i = 0; i < btnsOpenModal.length; i++)

btnsOpenModal[i].addEventListener('click', openModal);

btnClosemodal.addEventListener('click', closeModal);

overlay.addEventListener('click', closeModal);

ここには3つのボタンがあるのではないでしょうか.
だからボタンごとに順番に出します!

document.querySelectorAll('.show-modal')

それだけで3つ選んだので.
アレイ状態といえる.
でも1つずつ引くからループで引く.
そしてaddEventListenerをそれぞれ追加!
ちなみにhiddenをそう書くために
cssバー

.hidden {
  display: none;
}

このように設定する
追加と削除を同時に実行します.
窓を消して、発生させて、それからそれにします!
次のモデル銃が現れた時.
escウィンドウでキャンセルしましょう!

document.addEventListener('keydown', function (e) {

  if (e.key === 'Escape') {
    if (!modal.classList.contains('hidden')) {
      closeModal();
    }
  }
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

ここにはkeydownと書いてあります
キーボードでescキーを押すとモードウィンドウが消えます
だから書いたのです.
参考までに、keydown、keypress、keyupなどの子供はキーボードイベントと呼ばれ、keydownはキーボードが接触した瞬間に発生するイベントです.
キーは押した瞬間で、キーはキーボードから離した瞬間です.
起こります.
その関数(e)に対して
よくわかりません.
今は質問の状態です.
+)function(e)についての回答はこうです.
Hi, and yes, that is the event object. It is created by the DOM (not really by JavaScript, I believe) when a user or other event happens, and is then passed to the event listener, which then again calls the function we programmed it to call. It is sent whether we want it or not, but if we do, then we accept that as a parameter to our function, and that gives is access to all its properties.
So we set up an event listener with (in this example) document.addEventListener, and then tell the event listener which event to listen for, and which function to call when the event happens. This "registers"that listener with the DOM.
The user then - again in this example - presses a key, the browser engine detects a keydown event which it informs the DOM about. The DOM then tells JavaScript to execute the function we assigned to that event, and passes the event object to it. JavaScript then puts that object into the first parameter of the function, if we define one.
Or something like that. :)