如何将模态 window jQuery 重写为原生 Javascript？

Question

如何将模态 windows 的 jQuery 代码重写为本机 Javascript？保存和使用数据属性很重要。

我无法同时使用 forEach 和 getAttribute 编写代码。我总是使用 jQuery 编写代码，现在我必须使用原生 JavaScript.

编写代码

$('[data-modal]').click(function () {
    var target = $(this).attr('data-modal');

    if (target == 'close') $('.modal-container').removeClass('active');
    else                   $('.modal-container' + target).addClass('active');
    
});

body {
  padding: 50px;
}
.btn-group .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2980b9;
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal-container.active {
  opacity: 1;
  visibility: visible;
}
.modal-container .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.modal-container .modal {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 30px;
  border-radius: 3px;
  max-width: 600px;
  margin: 50px auto;
}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Modal example</title>
</head>
<body>

    <div class="page-content">
        <div class="btn-group">
            <a class="btn" data-modal="#m1">Open modal 1</a>
            <a class="btn" data-modal="#m2">Open modal 2</a>
            <a class="btn" data-modal="#m3">Open modal 3</a>
        </div>
    </div>

    <div id="m1" class="modal-container">
        <div class="overlay" data-modal="close"></div>
        <div class="modal">
            <h2>Modal window title</h2>
            <p>1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
            <button data-modal="close">Close window</button>
        </div>
    </div>
    <div id="m2" class="modal-container">
        <div class="overlay" data-modal="close"></div>
        <div class="modal">
            <h2>Modal window title</h2>
            <p>2 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
            <button data-modal="close">Close window</button>
        </div>
    </div>
    <div id="m3" class="modal-container">
        <div class="overlay" data-modal="close"></div>
        <div class="modal">
            <h2>Modal window title</h2>
            <p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
            <button data-modal="close">Close window</button>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="js/main.js"></script>
</body>
</html>

非常感谢您的帮助！

Answer 1

试一试

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("btn")) {
    document.querySelector(tgt.dataset.modal).classList.add('active')
  } else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
    tgt.closest('.modal-container').classList.remove('active')
  }
});

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("btn")) {
    document.querySelector(tgt.dataset.modal).classList.add('active')
  } else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
    tgt.closest('.modal-container').classList.remove('active')
  }
});

body {
  padding: 50px;
}

.btn-group .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2980b9;
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-container.active {
  opacity: 1;
  visibility: visible;
}

.modal-container .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.modal-container .modal {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 30px;
  border-radius: 3px;
  max-width: 600px;
  margin: 50px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-content">
  <div class="btn-group">
    <a class="btn" data-modal="#m1">Open modal 1</a>
    <a class="btn" data-modal="#m2">Open modal 2</a>
    <a class="btn" data-modal="#m3">Open modal 3</a>
  </div>
</div>

<div id="m1" class="modal-container">
  <div class="overlay" data-modal="close"></div>
  <div class="modal">
    <p>1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
  </div>
</div>
<div id="m2" class="modal-container">
  <div class="overlay" data-modal="close"></div>
  <div class="modal">
    <p>2 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
  </div>
</div>
<div id="m3" class="modal-container">
  <div class="overlay" data-modal="close"></div>
  <div class="modal">
    <p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
  </div>
</div>

如何将模态 window jQuery 重写为原生 Javascript？

How can I rewrite modal window jQuery into native Javascript?

javascript

jquery

popup