Question

我试图用JavaScript ES5制作模态。

单击按钮时，将显示叠加层和模态窗口。模态窗口将有一个＆＃39; X＆＃39; （关闭模态），将删除叠加和模态。如果单击模态，则没有任何反应;如果你点击X或覆盖它隐藏。

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

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

＆＃13;

// 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);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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显示叠加层？

1 个答案: