Как сделать, чтобы всплывающее окно появлялось при нажатии на кнопку?

Question

Как сделать, чтобы всплывающее окно появлялось при нажатии на кнопку?

Рейтинг: 0Ответов: 2Опубликовано: 16.02.2023

Сейчас только на первой, как сделать чтобы на второй тоже было, но при этом чтобы они открывались, независимо друг от друга

animateDisplay = function(target, animationClass, displayType, timeout) {
    // timeout should be longer than css transition
    var doneTimedDisplay = false,
      displaying = false;

    target.addEventListener('transitionend', function() {
      if (!target.classList.contains('show')) {
        target.style.display = 'none';
      }
      doneTimedDisplay = true;
    });
    if (!target.style.display || target.style.display === 'none') {
      displaying = true;
      target.style.display = displayType;
    } else {
      displaying = false;
    }

    setTimeout(function() {
      target.classList.toggle(animationClass);
      doneTimedDisplay = false;
    }, 10);

    if (!displaying) {
      setTimeout(function() {
        // failsafe for transitioned not firing
        if (!doneTimedDisplay) {
          target.style.display = 'none';
        }
        doneTimedDisplay = true;
      }, timeout);
    }
  };

 document.querySelector('.mybutt')
   .addEventListener('click', function() {
   animateDisplay(document.querySelector('.content'), 'show', 'block', 300)
 });

.box {

}
.content {
  height: 100px;
  width: 100px;
  background: yellow;
  opacity: 0;
  display: none;
  position: absolute;
  transition: all 300ms ease;
  left: 30px;
}

.content.show {
  opacity: 1;
}

.mybutt {



}

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - display none transition</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<button class="mybutt">Hit me 1</button>
<div class="box">
  <div class="content">Hi 1</div>
</div>


<button class="mybutt">Hit me 2</button>
<div class="box">
  <div class="content">Hi 2</div>
</div>


<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

css javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

как сделать чтобы на второй тоже было, но при этом чтобы они открывались, независимо друг от друга

Предлагаю для удобства немного изменить html (см.пример ниже). Это позволит довольно просто определять группу элементов через единого родителя.

Поскольку поиск "соседних" элементов более мудреный. :)

const ob = document.querySelector('body')
ob.addEventListener('click', e => {
  const o = e.target.closest('.mybutt')
  if (!o) {
    if (e.target.closest('.content')) return
    ob.querySelectorAll('.content.show').forEach(el => animateDisplay(el, 'show', 'block', 300))
    return
  }
  const op = e.target.closest('.container')
  const el = op.querySelector('.content')
  animateDisplay(el, 'show', 'block', 300)
});

function animateDisplay(target, animationClass, displayType, timeout) {
  // timeout should be longer than css transition
  var doneTimedDisplay = false,
    displaying = false;

  target.addEventListener('transitionend', function() {
    if (!target.classList.contains('show')) {
      target.style.display = 'none';
    }
    doneTimedDisplay = true;
  });
  if (!target.style.display || target.style.display === 'none') {
    displaying = true;
    target.style.display = displayType;
  } else {
    displaying = false;
  }

  setTimeout(function() {
    target.classList.toggle(animationClass);
    doneTimedDisplay = false;
  }, 10);

  if (!displaying) {
    setTimeout(function() {
      // failsafe for transitioned not firing
      if (!doneTimedDisplay) {
        target.style.display = 'none';
      }
      doneTimedDisplay = true;
    }, timeout);
  }
};

body {
  width: 100vw;
  height: 100vh;
}
.box {}

.content {
  height: 100px;
  width: 100px;
  background: yellow;
  opacity: 0;
  display: none;
  position: absolute;
  transition: all 300ms ease;
  left: 30px;
}

.content.show {
  opacity: 1;
}

.mybutt {}

<div class='container'>
  <button class="mybutt">Hit me 1</button>
  <div class="box">
    <div class="content">Hi 1</div>
  </div>
</div>


<div class='container'>
  <button class="mybutt">Hit me 2</button>
  <div class="box">
    <div class="content">Hi 2</div>
  </div>
</div>

Answer 2

▲ 1

 document.querySelectorAll('.mybutt').forEach(item => {
    item.addEventListener('click', function() {      
      animateDisplay(this.nextElementSibling.querySelector('.content'), 'show', 'block', 300)
    });
 })

Как сделать, чтобы всплывающее окно появлялось при нажатии на кнопку?

Ответы