1

I've created a simple modal pop up when list item is clicked but I don't know how to close it.
I tried adding on click event for body but even if I add flags it execute at the same time when modal show up and nothing can be seen. I found jquery solutions but I would like to do without libraries.

Codepen

<ul>
  <li class="item">List item 1</li>
  <li class="item">List item 2</li>
  <li class="item">List item 3</li>
</li>

let items = document.querySelectorAll('.item');

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', () => {
    createModal(items[i]);
  });
}

const createModal = (parent) => {
  const modal = document.createElement('div');
  modal.className = 'list-modal';

  const rename = document.createElement('p');
  rename.className = 'rename';
  rename.textContent = 'Rename';
  modal.appendChild(rename);

  const deleteList = document.createElement('p');
  deleteList.className = 'delete';
  deleteList.textContent = 'Delete';
  modal.appendChild(deleteList);

  parent.appendChild(modal);
};

  // let body = document.querySelector('body');
  // body.addEventListener('click', () => {
  //   const modal = document.querySelector('.list-modal');
  //   modal.classList.add('hide');
  // });
fluffy
  • 130
  • 4
  • 1
    You could search by your class names and then set the element to be hidden: window.addEventListener('click', function(e){ if (document.getElementById('item').contains(e.target)){ console.log('inside'); } else{ console.log('outside'); var deleteItems = document.getElementsByClassName('delete'); for (let i = 0; i < deleteItems.length; i++) {deleteItems[i].hidden = true;} var renameItems = document.getElementsByClassName('rename'); for (let i = 0; i < renameItems.length; i++) {renameItems[i].hidden = true;}}}); – keenthinker Jan 07 '21 at 16:43
  • @0stone0 / ritaj / Tibebes. M. The SO post https://stackoverflow.com/questions/36695438/detect-click-outside-div-using-javascript is not answering the question in this SO post how the visibility of the dynamically created elements can be manipulated using plain JS - the click is already handled correctly by the OP. – keenthinker Jan 07 '21 at 16:49

0 Answers0