Всем приветики. Только учусь фронту. Пишу сайт, на обоих страничках сайта будет всплывающее окно (когда юзер кликает на кнопку, он должен заполнить форму). на главной страничке получилось при помощи 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:em@i.l';" 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>
id="merch__modal"
, а в JS обращаетесь кmerch__Modal
(Modal должен быть с маленькой буквы)