Live Demo: Example of HTML dialog Tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML dialog Tag</title>
<style>
    dialog {
        text-align: center;
    }
    /* Backdrop is only displayed when dialog is opened using showModal() method */
    dialog::backdrop {
        background: rgba(0, 0, 0, .5);
    }
</style>
</head>
<body>
	<p><strong>Note:</strong> You can use the show(), showModal() method or "open" attribute to show the dialog, and the hide() method to hide the dialog.</p>
    <div id="imgBox">
        <p><img src="/examples/images/sky.jpg" alt="Cloudy Sky"></p>
        <button type="button" onclick="confirmDelete();">Delete image</button>
    </div>

<dialog id="confirmDialog">
        <p>Are you sure you want to delete this item?</p>
        <button type="button" onclick="deleteImage();">Yes</button>
        <button type="button" onclick="hideDialog();">No</button>
    </dialog>

function confirmDelete() {
            if(typeof dialog.showModal === "function") {
                dialog.showModal();
            } else {
                alert("Your browser does not support dialog element!");
            }
        }

function deleteImage() {        
            img.parentNode.removeChild(img);
            dialog.close();
			document.write("Image has been deleted!");
        }

function hideDialog() {
            dialog.close();
        }
    </script>
</body>
</html>