This is a pure HTML and pure CSS modal dialog control meaning that there is no JavaScript or JQuery involved. Here is the code:

HTML
HTML Code:
<input id="toggle-dialog-open" class="toggle-dialog" name="confirm-dialog" type="radio" />
<label for="toggle-dialog-open">Open</label>

<div class="dialog-overlay">
  <dialog>
    <h1>Confirmation Dialog</h1>
    <form id="form-confirm" method="post" action="/do-something">
      <p>Are you sure?</p>
    </form>
    <button form="form-confirm" type="submit">Yes</button>
    <input id ="toggle-dialog-close" class="toggle-dialog" name="confirm-dialog" type="radio" />
    <label for="toggle-dialog-close">No</label>
  </dialog>
</div>
CSS
Code:
.toggle-dialog:checked ~ .dialog-overlay,
.toggle-dialog:checked ~ .dialog-overlay dialog {
  display: block;
}

.toggle-dialog,
.toggle-dialog:not(:checked) ~ .dialog-overlay {
  display: none;
}

.toggle-dialog + label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin: 0.2rem;
  border: 1px solid #000;
  background-color: #f0f0f0;
  color: #000;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25em;
  font: -webkit-small-control;
  box-sizing: border-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding-top: 1rem;
}

dialog {
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
Here is a Fiddle: https://jsfiddle.net/n5br3axL/