Using a modal instead of confirm()

JavaScript
2

Hey @Gandalf, since you have to wait for some click event to fire you might have showbox() return a promise, which would be fulfilled if the user confirms and otherwise be rejected. I suppose the simplest way would be to just use the resolve() / reject() functions as event handlers – these would then be specific to each opened modal and have to be removed afterwards:

const modal = document.getElementById('modalHolder')
const btnYes = modal.querySelector('#btnYes')
const btnNo = modal.querySelector('#btnNo')

function showbox () {
  let yesHandler
  let noHandler

  modal.style.display = 'flex'

  return new Promise((resolve, reject) => {
    yesHandler = resolve
    noHandler = reject

    btnYes.addEventListener('click', yesHandler)
    btnNo.addEventListener('click', noHandler)
  }).finally(() => {
    modal.style.display = 'none'

    btnYes.removeEventListener('click', yesHandler)
    btnNo.removeEventListener('click', noHandler)
  })
}

const del = document.querySelectorAll('.btnDelete')
for (let i = 0; i < del.length; i++) {
  del[i].addEventListener('click', function (e) {
    e.preventDefault()
    showbox().then(() => {
      console.log('Delete stuff')
    }).catch(() => {
      console.log('Do nothing')
    })
  })
}
1 Like