如何在模态上显示纯 JavaScript 的叠加层？

Question

我正在尝试使用 JavaScript ES5 制作模态。

当您单击一个按钮时，将显示一个叠加层和一个模式 window。模态 window 将有一个 'X'（关闭模态），这将删除叠加层和模态。如果你点击模式，什么也不会发生；如果您单击 X 或覆盖它隐藏。

我不确定我做错了什么。我尝试了很多东西，但是每当我尝试将我的模态与叠加层放在一起时，代码就会停止工作。

您是否也看到了改进当前代码的方法？保持非常基本。

// Click button
// Show overlay
// Show Modal - text and close button

// Click overlay - close
// Click button - close overlay
// Click modal - no effect

//Variables
var btn = document.querySelector('.btn-overlay');
var overlay = document.createElement = ('<div class="overlay"></div>');
var body = document.querySelector('body');
var modal = document.querySelector('.modal');
var closeBtn = document.querySelector('.modal-close');

function showModal(e) {
  e.preventDefault();
  modal.classList.add('is-active');
  document.body.appendChild(overlay);
}

function closeModal(e) {
  modal.classList.remove('is-active');
  document.body.removeChild(overlay);
}

btn.addEventListener('click', showModal);
closeBtn.addEventListener('click', closeModal);

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 8000;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  background-color: red;
  display: none;
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 0;
  left: 0;
  z-index: 9000;
}

.modal.is-active {
  display: block;
}

.modal-close {
  position: relative;
  cusror: pointer;
  z-index: 9950;
}

<main>
  <h1>Awesome content</h1>
  <button class="btn-overlay"> Show Modal</button>
</main>

<section class="modal">
  <span class="modal-close">X</span>
  <h1>Modal</h1>
</section>

View on Codepen

Answer 1

您没有正确使用 document.createElement。该方法需要一个参数——您希望创建的元素类型。

// Create a div
var overlay = document.createElement('div');
// Assign a class name
overlay.className = 'overlay';

尽管接下来的内容并没有破坏您的代码，但您应该更正 CSS 中的拼写错误：

.modal-close {
  …
  cusror: pointer; /* <-- oops */
  …
}

最后，您询问了改进代码的建议。我会阅读有关如何使您的模态代码可访问的信息。当我们制作东西时，可访问性常常被忽略，让你的像素为每个人工作是至关重要的。查看 this 以获取示例和深入解释。除了可访问性之外，我会考虑向您的覆盖添加过渡并使其成为 body 上的伪元素。优点是代码更干净，更少JavaScript。

// Click button
  // Show overlay
  // Show Modal - text and close button

// Click overlay - close
// Click button - close overlay
// Click modal - no effect

  //Variables
  var btn = document.querySelector('.btn-overlay');
  var overlay = document.createElement('div');
  overlay.className = 'overlay';
  var body = document.querySelector('body');
  var modal = document.querySelector('.modal');
  var closeBtn = document.querySelector('.modal-close');
  

  function showModal(e) {
    e.preventDefault();
    modal.classList.add('is-active');
    body.appendChild(overlay);
  }

  function closeModal(e) {
    modal.classList.remove('is-active');
    document.body.removeChild(overlay);
  }
  
  btn.addEventListener('click', showModal);
  closeBtn.addEventListener('click', closeModal);

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 8000;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  background-color: red;
  display: none;
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 0;
  left: 0;
  z-index: 9000;
}

.modal.is-active {
  display: block;
}

.modal-close {
  position: relative;
  cursor: pointer;
  z-index: 9950;
}

<body>
<main>
  
  <h1>Awesome content</h1>
  
  <button class="btn-overlay"> Show Modal</button>
  
  
</main>
  
  <section class="modal">
    <span class="modal-close">X</span>
    <h1>Modal</h1>
  </section>
  
</body>

https://jsfiddle.net/y0wfzuj8/

如何在模态上显示纯 JavaScript 的叠加层？

How to show overlay with pure JavaScript on modal?

html

javascript

css

modal-dialog

ecmascript-5