Запуск определенного модального контента ⇐ CSS

[Anonymous]

У меня есть рабочий код, который переключает модальное окно, но я хочу иметь возможность переключать различное модальное содержимое с помощью разных триггеров на странице. Я знаю, что мне нужно использовать здесь идентификаторы, но я не уверен на 100%, как это сделать с моим текущим кодом. Я все еще учусь!
Может ли кто-нибудь помочь мне изменить мой Javascript для запуска по идентификаторам? Нужно ли мне использовать Bootstrap или что-то еще для достижения этой цели или мой код можно легко изменить?

Код: Выделить всё

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
function closeAction(){
toggleModal();
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeAction);
window.addEventListener("click", windowOnClick);

Код: Выделить всё

.trigger{
font-size: 16px;
color: #fff;
background-color: #3b94a3;
border-radius: 0px 4px 4px 0px;
max-width: 350px;
line-height: 1.4!important;
position: absolute;
left: 0px;
top: 80px;
}
.trigger:hover{
color: #fff;
background-color: #4E4E4E;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
z-index: 1;
cursor: pointer;
}
.modal-content {
background-color: white;
padding: 1rem 1.5rem;
margin: 100px auto;
width: 70%;
cursor: default;
position: relative;
}
.close-button {
position: absolute;
cursor: pointer;
right: -40px;
top: -10px;
font-size: 40px;
}
.close-button:hover {
color: darkgray;
}
.show-modal {
z-index: 100;
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

Код: Выделить всё

Take a Tour


×
This is tour content



View the game


×
This is game content

Подробнее здесь: https://stackoverflow.com/questions/786 ... al-content