Html Question posted in
Some basic documentation can be found here.

Html – How to handle multiple dialog boxes?

I am making a sort of mini gallery for myself as a personal project. I am displaying mini pictures and if i click on them, a modal should pop up displaying entire picture.

  <dialog>
    <img src="static/img/img (1).jpg" height="600">
    <button autofocus>Close</button>
  </dialog>
  <button class="btn">
    <img src="static/img/img (1).jpg" height="200" width="200">
  </button>
  
  <dialog>
    <img src="static/img/img (2).jpg" height="600">
  <button autofocus>Close</button>
  </dialog>
  <button class="btn">
    <img src="static/img/img (2).jpg" height="200" width="200">
  </button>

this is my html structure. There are many more pics, this is just the first two.

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

This is my js file.

Problem is first modal is working fine, but none of the other modal is working. How can I make it work?

Tags:

2

Answers


  1. 0

    Using querySelectorAll =>

    const dialog = document.querySelector("dialog");
const showButton = document.querySelectorAll("dialog + button");
const closeButton = document.querySelectorAll("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.forEach(k=> k.addEventListener("click", () => {
  dialog.showModal();
}));

// "Close" button closes the dialog
closeButton.forEach(l=>l.addEventListener("click", () => {
  dialog.close();
}));
    <dialog>
    <img src="https://www.w3schools.com/html/img_girl.jpg" height="600">
    <button autofocus>Close</button>
  </dialog>
  <button class="btn">
    <img src="https://www.w3schools.com/html/img_girl.jpg" height="200" width="200">
  </button>
  
  <dialog>
    <img src="https://www.w3schools.com/html/img_girl.jpg" height="600">
  <button autofocus>Close</button>
  </dialog>
  <button class="btn">
    <img src="https://www.w3schools.com/html/img_girl.jpg" height="200" width="200">
  </button>
    Login or Signup to reply.
  2. 0

    This should do the job

    const dialogs = document.querySelectorAll("dialog");
const closeButton = document.querySelector("dialog button");
const imgButtons = document.querySelectorAll(".btn");

    imgButtons.forEach((button,index) => {
  console.log('hi')
  button.addEventListener("click", () => {
        const dialog = dialogs[index]
    const dialogImage = dialog.querySelector("img");
    const imageSrc = button.querySelector("img").src;
    dialogImage.src = imageSrc;
    dialog.showModal();
  });
})
dialogs.forEach(dialog => {
  const closeButton = dialog.querySelector("button");
  closeButton.addEventListener("click", () => {
    dialog.close();
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search