У меня есть две разные ценовые карты:
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to AM</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited TMs</li>
</ul>
</div>
При нажатии каждая из них должна вызывать разные модальные параметры:
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
Все идентификаторы уникальны. С этим JS я могу вызвать первый модальный, но не второй:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
Я добавил уникальные идентификаторы для второй карты и модального, но когда я потянул их в JS добавив это:
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
Я не получаю тот же эффект. Вот соответствующий CSS: Добавлен соответствующий CSS
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}