<button onclick="run()">Show</button>
<ul></ul>
<div class="popup-box"></div>

body{
  background: #dbe2ef;
}
button {
  padding: 5px;
  margin-bottom: 5px;
  width: 100px;
}

ul{
  width: 60px;
  padding: 20px;
  border: 1px solid black;
  list-style: none;
}

div.confirm {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 20px;
  width: 300px;
  border: 1px solid black;
  color: white;
  background: rgba(0,0,0,0.9);
}
const addItem = (label) => {
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = label;
  ul.appendChild(li);
}

const asyncConfirm = (text) => {
  return new Promise(resolve => {
    const wrapper = document.querySelector('div.popup-box');
    const popup = document.createElement('div');
    popup.classList.add('confirm');
    popup.textContent = text;
    wrapper.appendChild(popup);
    
    const okBtn = document.createElement('button');
    const cancelBtn = document.createElement('button');
    okBtn.textContent = 'Ok';
    cancelBtn.textContent = 'Cancel';

    popup.appendChild(okBtn);
    popup.appendChild(cancelBtn);

    const onClick = pass => {
      resolve(pass);
      popup.remove();
    };

    okBtn.addEventListener('click', onClick.bind(null, true));
    cancelBtn.addEventListener('click', onClick.bind(null, false));
  })
};

const run = async () => {
  if (await asyncConfirm('Add Item?')) {
    addItem('💡Item');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.