Закрыть всплывающее окно кликнув вне его

Question

Всем приветики. Только учусь фронту. Пишу сайт, на обоих страничках сайта будет всплывающее окно (когда юзер кликает на кнопку, он должен заполнить форму). на главной страничке получилось при помощи JS написать код, закрывающий окно, но на другой странице этот код не работает (формы на страницах отличаются). Котаны, можете глянуть, плиз, где я накосячила в коде?

// кликни вне окна, чтобы закрыть
document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('merch__Modal');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

<!-- merch -->
<div id="merch">
  <div class="content">
    <div class="grid__body">
      <div class="grid__merch">
        <img src="img/manshort_front_black_500.jpg" alt="shirt">
        <p>Men's white t-shirt</p>
        <button class="merch__btn" onclick="document.getElementById('merch__modal').style.display='block'">Buy<i class="fas fa-shopping-cart"></i></button>
        </img>
      </div>
      <div class="grid__merch">
        <img src="img/white.jpg" alt="shirt">
        <p>Men's black t-shirt</p>
        <button class="merch__btn" onclick="document.getElementById('merch__modal').style.display='block'">Buy<i class="fas fa-shopping-cart"></i></button>
        </img>
      </div>
      <div class="grid__merch">
        <img src="img/manshort_front_black_500.jpg" alt="shirt">
        <p>Women's black t-shirt</p>
        <button class="merch__btn" onclick="document.getElementById('merch__modal').style.display='block'">Buy<i class="fas fa-shopping-cart"></i></button>
        </img>
      </div>
      <div class="grid__merch">
        <img src="img/white.jpg" alt="shirt">
        <p>Women's white t-shirt</p>
        <button class="merch__btn" onclick="document.getElementById('merch__modal').style.display='block'">Buy<i class="fas fa-shopping-cart"></i></button>
        </img>
      </div>
    </div>
  </div>
</div>
<!-- merch Modal -->
<div id="merch__modal" class="modall">
  <div class="modal-content">
    <header class="header-container">
      <h2><i class="fas fa-tshirt"></i>Our merch</h2>
    </header>
    <div class="pop-container">
      <label for="shirts" class="shirt-size"><i class="fa fa-shopping-cart"></i> Choose your size:</label>
      <select id="cars" name="sizes">
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="M">XL</option>
        <option value="L">XXL</option>
      </select>
      <p><label><i class="fa fa-user"></i> Send To</label></p>
      <input class="content-input" type="text" placeholder="Enter email">
      <button onclick="location.href='mailto:[email protected]';" class="pay__btn">PAY <i class="fa fa-check"></i></button>
      <button class="close__btn" onclick="document.getElementById('merch__modal').style.display='none'">Close <i class="fas fa-times"></i></button>
      <p class="float-right">Need <a href="#">help?</a></p>
    </div>
  </div>
</div>

Answer 1

    <script>
        // кликни вне окна, чтобы закрыть
        document.addEventListener('mouseup', function(e) {
        let container = document.getElementById('merch__modal');
        if (!container.contains(e.target)) {
            container.style.display = 'none';
        }
        });
    </script>

вставь непосредственно в файл внизу тега и проверь)

БЛОГ НА HUSL

Закрыть всплывающее окно кликнув вне его

Ответы (1 шт):