I have a modal box that opens at the click of a button. Everything works fine. However I need another modal box on my page so I duplicated the first modal box but this doesn’t open on click button.
What I would like to do is trigger the second modal with the same classes and the same js function in such a way that no more code is added. Is such a thing possible?
Alternatively, how could I activate the second modal by adding the least amount of code?
/* Modal Box Js */
const modal = document.querySelector(".modal");
const trigger = document.querySelector(".trigger");
const closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);/**********
Modal Box Style
**********/
.trigger {cursor: pointer;}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
width: 40rem;
border-radius: 6px;
display: flex;
flex-direction: column;
}
.msg-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
}
.msg-text {
font-size: 14px;
margin-bottom: 6px;
color: #5B616D;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
align-self: end;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}<!-- Modal Box 1 -->
<div class="trigger">Modal Box 1</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<span class="msg-title">Title 1</span>
<span class="msg-text">
“If you are distressed by anything external, the pain is not due to the thing itself, but to your estimate of it; and this you have the power to revoke at any moment.”
― Marcus Aurelius.
</span>
</div>
</div>
<!-- Modal Box 2 -->
<div class="trigger">Modal Box 2</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<span class="msg-title">Title 2</span>
<span class="msg-text">
“If you are distressed by anything external, the pain is not due to the thing itself, but to your estimate of it; and this you have the power to revoke at any moment.”
― Marcus Aurelius.
</span>
</div>
</div>>Solution :
Your main problem was because of not using NodeList.forEach to both assign clicks to the desired elements and for not looping the modals to toggle the "open" class.
Here’s a variant on your code that uses the aforementioned and the better tool for the job, and that’s by using data-* attribute to reference the desired modal to toggle, namely data-modal, which can be assigned to any button or element, and accepts the ID selector of the modal to target. So you’re not limited to have a specific HTML structure or having to use only one button element-per-modal.
Another issue that’s fixed is: never use negative transform in CSS to center your modal content. Use instead margin: auto inside a flex parent. Also, add some scrollbars! (See my comments in CSS)
// DOM helpers:
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
// Task: Modal Box
const elsModals = els(".modal");
const elsModalBtns = els("[data-modal]");
const modalToggle = (id) => {
el(id).classList.toggle("show-modal");
};
const modalsClose = (evt) => {
// Do nothing, click was inside a modal or modal button:
if (evt.target.closest(".modal-content") || evt.target.closest("[data-modal]")) return;
// Else, close all modals:
elsModals.forEach(elMod => elMod.classList.remove("show-modal"));
}
elsModalBtns.forEach(elBtn => {
elBtn.addEventListener("click", () => modalToggle(elBtn.dataset.modal));
});
addEventListener("click", modalsClose);/*
* Modal Box
*/
.trigger {
cursor: pointer;
}
.modal {
position: fixed;
display: flex;
/* use flex!!! */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
margin: auto; /* center inside flex parent */
overflow: auto; /* scroll inner content if needed */
max-height: 70vh; /* make it scroll if exceeds this height */
background-color: white;
padding: 20px;
width: 40rem;
border-radius: 6px;
display: flex;
flex-direction: column;
}
.msg-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
}
.msg-text {
font-size: 14px;
margin-bottom: 6px;
color: #5B616D;
}
.close-button {
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
align-self: end;
border: 0;
font-size: 1.2rem;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}<div class="trigger" data-modal="#modal-lorem">Modal Box 1</div>
<div class="trigger" data-modal="#modal-aurelius">Modal Box 2</div>
<div id="modal-lorem" class="modal">
<div class="modal-content">
<button type="button" class="close-button" data-modal="#modal-lorem">×</button>
<span class="msg-title">Title 1</span>
<span class="msg-text">
“Dolor sit amet, consectetur adipisicing elit. Numquam earum debitis architecto, temporibus quod maxime velit, rem ex nam eum ea illum, assumenda nesciunt consectetur quaerat. Accusamus reprehenderit, distinctio et!
”
― Lorem ipsum.
</span>
</div>
</div>
<div id="modal-aurelius" class="modal">
<div class="modal-content">
<button type="button" class="close-button" data-modal="#modal-aurelius">×</button>
<span class="msg-title">Title 2</span>
<span class="msg-text">
“he pain is not due to the thing itself, but to your estimate of it; and this you have the power to revoke at any moment.”
― Marcus Aurelius.
</span>
</div>
</div>