What is the best way to trigger multiple modalboxes using JavaScript?

Question

What is the best way to trigger multiple modalboxes using JavaScript?

I am facing an issue with a modal box on my webpage. The first modal opens correctly when clicking a button, but after duplicating it for a second modal, the second one fails to open upon clicking the button.

Is there a way to trigger the second modal using the same classes and JavaScript function without adding additional code? Or can the second modal be activated with minimal 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>

javascript html css function triggers

Answer 1

Answer №1

Your primary issue stemmed from the lack of utilizing NodeList.forEach to both assign clicks to the desired elements and for neglecting to loop through the modals to toggle the "open" class.

Here's an alternative version of your code that incorporates the aforementioned method along with a more suitable tool, data-* attribute, specifically data-modal, which allows you to reference the desired modal to toggle without being restricted by a fixed HTML structure or limited to one button element per modal.

An additional problem addressed is the avoidance of negative transforms in CSS for centering modal content. Instead, it suggests using margin: auto within a flex parent and including scrollbars as necessary (refer to the comments in the CSS).

// Helper functions:

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) => {
  // No action if click occurred inside a modal or modal button:
  if (evt.target.closest(".modal-content") || evt.target.closest("[data-modal]")) return;
  // Otherwise, 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; /* Enable scrolling 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>

Answer 2

Your primary issue stemmed from the lack of utilizing NodeList.forEach to both assign clicks to the desired elements and for neglecting to loop through the modals to toggle the "open" class.

Here's an alternative version of your code that incorporates the aforementioned method along with a more suitable tool, data-* attribute, specifically data-modal, which allows you to reference the desired modal to toggle without being restricted by a fixed HTML structure or limited to one button element per modal.

An additional problem addressed is the avoidance of negative transforms in CSS for centering modal content. Instead, it suggests using margin: auto within a flex parent and including scrollbars as necessary (refer to the comments in the CSS).

// Helper functions:

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) => {
  // No action if click occurred inside a modal or modal button:
  if (evt.target.closest(".modal-content") || evt.target.closest("[data-modal]")) return;
  // Otherwise, 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; /* Enable scrolling 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>

What is the best way to trigger multiple modalboxes using JavaScript?

Answer №1

Similar questions

what is the process for installing non-NPM libraries with browserify?

Creating Dynamic UI in React Native by Displaying POST Request Data on Screen

Trouble encountered when implementing setInterval in Next.js

How do I set up a timing mechanism in a VSCode extension to automatically clear error messages after a specified duration?

Upgrading Pagination from Bootstrap 3 to Bootstrap 4: A Step-by-

React Native formInput Component with Underline Decoration

The pre-set value in the search bar of the Google specialized search

I am looking to create a route with parameters in Next.js, as well as without any parameters

What is the best way to perfectly match a blurry background image within a card?

Vanishing elements when employing the react-router library in a React project

What is the best way to assign classes to the appropriate element based on the counter value?

swap out a single amchart for a different one

Embedding version 8: navigating a basic class

How can you receive a file through AJAX response?

"Utilize Vue i18n to properly display currency amounts in USD

Encountered a problem when injecting the angularjs $location service

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

Send the form's ID as an argument to the click() function

Struggling to correct alignment issues with buttons within a container using Bootstrap 5

"The issue with AngularJS ng-init, preventing the initialization of a variable at