<button data-dialog="dialogA">Open dialogA</button>

<dialog id="dialogA">
	<button class="closeDialog">Close dialogA</button>
</dialog>

body:has(dialog:modal) {
  overflow: hidden;
}

::backdrop {
  backdrop-filter: blur(3px);
  background: hsl(0 0 0 / 90%);
}

/* Select and loop all elements with that data attribute */
document.querySelectorAll("[data-dialog]").forEach(button => {

		/* Listen for interaction (click) */
    button.addEventListener("click", () => {
    
		    /* Select the corresponding dialog */
        const dialog = document.querySelector(`#${ button.dataset.dialog }`);
    
		    /* Open dialog */
        dialog.showModal();
        
        /* Close dialog */dialog.querySelector(".closeDialog").addEventListener("click", () => dialog.close());
    
    });

});