我正在检查一些代码来打开和关闭模态框。直到最后一切都很顺利。模态框应该通过以下方式关闭：

• 单击“关闭”按钮
• 单击“ESC”键
• 单击模态框外部。

前两个操作都很好，但最后一个不起作用。当我查看控制台时，我收到消息 “Uncaught ReferenceError：$modalContainer 未定义”。

$modalContainer ，然而，已在函数的第一行中声明。它在所有代码中都有效，甚至在声明它的函数之外也有效。

我找到了两种解决方法，但它们并不是最佳实践：重新声明相同的变量或使用 document.querySelector('#modal-container') 完成工作。

// creates function to exhibit modal
function showModal() {
  var $modalContainer = document.querySelector('#modal-container'); //selects container
    $modalContainer.classList.add('is-visible'); // add visibility class
    }
// function to hide modal
function hideModal() {
  var $modalContainer = document.querySelector('#modal-container'); //selects container
  $modalContainer.classList.remove('is-visible'); //remove visibility class
}

// create event listener to show modal
document.querySelector('#modal-button').addEventListener('click', () => {
  showModal('This is not a headline', 'Here is a detail');
});

    //-- show modal --
function showModal(title, text) {
  var $modalContainer = document.querySelector('#modal-container');
  $modalContainer.innerHTML = '';
  // creates div for modal itself
  var modal = document.createElement('div');
  modal.classList.add('modal');

  // creates button to close modal and activate hideModal()
  var closeButtonElement = document.createElement('button');
  closeButtonElement.classList.add('modal-close');
  closeButtonElement.innerText = 'Close';
  closeButtonElement.innerHTML = "Close"; // new line
  closeButtonElement.addEventListener('click', hideModal); // new line

  // create H1 headline on Modal and message title variable
  var titleElement = document.createElement('h1');
  titleElement.innerText = title;

  // create <p> text on Modal and message text variable
  var contentElement = document.createElement('p');
  contentElement.innerText = text;

  //appends elements closebutton, titleand content to modal
  modal.appendChild(closeButtonElement);
  modal.appendChild(titleElement);
  modal.appendChild(contentElement);
  $modalContainer.appendChild(modal);

  // adds visibility class (?)
  $modalContainer.classList.add('is-visible');
};

// creates ESC shortcut to close modal
window.addEventListener('keydown', (e) => {
  var $modalContainer = document.querySelector('#modal-container');
  if (e.key === 'Escape' && $modalContainer.classList.contains('is-visible')) {
    hideModal();
  }
});

/* 
uncomment variable declaration and the modal closes as expected: with the "ESC" key, clicking on "Close" modal button and clicking outside the modal element.
*/

// var $modalContainer = document.querySelector('#modal-container');

// creates "Close" action by clicking outside modal
$modalContainer.addEventListener('click', (e) => {
  var target = e.target;
  if (target === $modalContainer) {
    hideModal();
  }
});

我可能遗漏了一些简单的东西，但找不到答案。有人可以告诉我问题出在哪里吗？为了提供除 JavaScript 代码之外的额外背景信息，我创建了一个包含所有 HTML、CSS 和 JS 的 Codepen： https://codepen.io/gobbet/pen/yLBGpzy

提前致谢