Как я могу переписать модальное окно jQuery в собственный Javascript?

Как я могу переписать этот код 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>

Буду очень благодарен за вашу помощь!

youmightnotneedjquery.com

— 10.12.2020 11:51

Почему вы удалили jQuery из фрагмента?

— 11.12.2020 12:44

javascript jquery popup

10.12.2020 11:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

111

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Большое спасибо. У меня есть еще один вопрос. Если внутри модального окна у меня есть кнопка «Закрыть» и, например, значок «Закрыть», и я хочу, чтобы при нажатии на эти элементы мое модальное окно также закрывалось. Как лучше это реализовать? Я отредактировал html в коде и добавил кнопку, вы можете увидеть в моем посте

— 11.12.2020 12:48

10.12.2020 12:02