<button id="showDialogBtn">Show a dialog and text</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>::backdrop test -> BG</p>
    <button id="confirmBtn">Close</button>
  </form>
</dialog>

button {
  font-size: 1.2rem;
  padding: 5px 15px;
}

dialog::backdrop {
  background-color: pink;
}

const showDialogBtn = document.getElementById('showDialogBtn');
const favDialog = document.getElementById('favDialog');

showDialogBtn.addEventListener('click', () => favDialog.showModal());