javascript - 模态滑动和打开

Question

我创建了两个模态框，但我不确定如何使用同一个按钮关闭它们。第一个模式可以正常关闭，但是第二个模式根本不会关闭。

我还希望为他们提供滑入和滑出的动画。但是，我不知道如何将它添加到我已经创建的代码中。谁能建议我该怎么做？

document.getElementById('project-1').addEventListener("click", function() {
  document.querySelector('.side-modal').style.display = "flex";
});

document.getElementById('project-2').addEventListener("click", function() {
  document.querySelector('.side-modal.second').style.display = "flex";
});

document.querySelector('.close-side-modal').addEventListener("click", function() {
  document.querySelector('.side-modal, .side-modal.second').style.display = "none";
});

.side-modal {
  width: 35%;
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: none;
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<a href="#" id="project-1" class="project-1 button">project 1</a>
<a href="#" id="project-2" class="project-2 button">project 2</a>

<div class="side-modal">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal second">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

Answer 1

您的问题是您没有定位所有“关闭”元素。

您可以使用 .querySelectorAll()以 class 的所有元素为目标，.forEach()遍历所有这些。

类似的东西:

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    var modal = button.getAttribute("modal");
    document.querySelector(modal).style.display = "block";
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    document.querySelectorAll('.side-modal').forEach(function(modal){
      modal.style.display = "none";
    });
  });
});

.side-modal {
  width: 35%;
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: none;
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<!-- Added "modal" attributes to use them in the JavaScript -->
<a href="#" class="project-1 button" modal=".modal-1">project 1</a>
<a href="#" class="project-2 button" modal=".modal-2">project 2</a>

<div class="side-modal modal-1">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal modal-2">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

请注意，我还在 HTML 中使用了一个自定义属性来轻松定位正确的 .side-modal。

那么，我建议你使用函数。这样，您就可以轻松地向元素添加一些运动。

例如，使用 right 属性:

// Function to close all side-modals
function side_modals_close() {
  document.querySelectorAll('.side-modal').forEach(function(modal) {
    modal.style.right = "-40%";
  });
}

// Function to show one side-modal
function side_modal_open(name) {
  var modal = document.querySelector(name);
  modal.style.right = "0%";
}

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    side_modals_close();
    side_modal_open(button.getAttribute("modal"));
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    side_modals_close();
  });
});

.side-modal {
  width: 35%; 
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: -40%; /* TAKIT: Starts out of screen */
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: block; /* TAKIT: Modified here, element is displayed but out of screen */
  transition: all 1s ease; /* TAKIT: Added this */
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<!-- Added "modal" attributes to use them in the JavaScript -->
<a href="#" class="project-1 button" modal=".modal-1">project 1</a>
<a href="#" class="project-2 button" modal=".modal-2">project 2</a>

<div class="side-modal modal-1">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal modal-2">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>