<button id="dialog-btn">
  Show Dialog
</button>

<dialog>
  <div>
    <h4>This is Dialog!</h4>
    <p>
       This is DialogThis is DialogThis is      DialogThis  is DialogThis is Dialog is DialogThis is Dialog is DialogThis is Dialog
    </p>
  </div>
  <div class="text-right">
    <button 
             id="dialog-cancel-btn"          style="border:1px solid var(--vp-c-brand-dark); color: var(--vp-c-brand-dark); padding: .3rem 1rem; border-radius: 8px;">
      Cancel
    </button>
  </div>
</dialog>

:root {
  --vp-c-brand-dark: #33a06f;
}

dialog {
  border-radius: 8px;
  background: white;
  color: black;
  border: 1px solid #fff;
}

dialog::backdrop {
  background: rgb(0,0,0,.7);
}

#dialog-btn {
  background: var(--vp-c-brand-dark);
  color: white;
  padding: .5rem 1rem;
  border-radius: 8px;
  border: 1px solid #fff;
}

dialog > div {
  min-width: 300px;
  max-width: 450px;
}

dialog h4 {
  font-size: 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #eee;
}
.text-right {
  text-align: right;
}

 const dialogBtn = document.querySelector('#dialog-btn')
      const dialogCancelBtn = document.querySelector('#dialog-cancel-btn')
      const dialogEl = document.querySelector('dialog')

      const dialogClose = () => {
        dialogEl.close()
      }
      const dialogShow = () => {
        dialogEl.showModal()
      }

      dialogCancelBtn.addEventListener('click', () => dialogClose())

      dialogBtn.addEventListener('click', () => {
        if('open' in dialogEl.attributes) {
          return dialogClose()
        }
        dialogShow()
      })