<button class="btn" onClick="showConfirm()">Delete everything</button>

<div class="confirm-wrapper" id="myConfirm" style="display: none;">
  <div class="confirm">
    <p>Are you sure?</p>
    <div class="confirm-buttons">
      <button class="btn" onClick="hideConfirm()">Cancel</button>
      <button class="btn" onClick="hideConfirm()">OK</button>
    </div>
  </div>
</div>
body {
  font-size: 16px;
  font-family: sans-serif;
  margin: 50px;
}

.btn {
  padding: 0.5em 1em;
  font-size: 16px;
}

.confirm-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .confirm {
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 50px;
    min-width: 320px;
    box-sizing: border-box;
    background: white;
    box-shadow: rgba(0,0,0,0.4) 0 0 5px;
  }

    .confirm-buttons {
      text-align: right;
    }
      .confirm-buttons .btn {
        min-width: 90px;
        margin-left: .5em;
      }
const myConfirm = document.getElementById('myConfirm');

function showConfirm() {
  myConfirm.style.display = 'flex';
}

function hideConfirm() {
  myConfirm.style.display = 'none';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.