This is a modal popup in HTML using the new dialog API (tag). It is made with CSS and JavaScript. It is a delete confirmation dialog. You can download the source code for free (below).
The modal popup is made with the new dialog tag in HTML. It contains cancel-button and delete-button. When you click on them, the close() method of the dialog is called. I have added separate methods for cancel and delete buttons.
When you click on the show button, showModal() method gets called and the dialog will be opened. It shows the nice overlay color in the background. As long as the dialog is opened, the user cannot interact with the rest of the web page. You can change the over lay color using ::backdrop in CSS.
I set the dialog position to the center of the screen. The font used in the project is Roboto. I have added lorem ipsum paragraphs to fill the whole web page. When the dialog state is open, user cannot click on the paragraphs.
Related:
Final output:
If the video isn’t working, watch it on the YouTube.
You can download the trash icon from feathericons. Search for “trash” on the site.
Here is the source code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delete Dialog</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 1em;
}
p {
font-size: 1.1rem;
font-family: "Roboto", sans-serif;
}
.open-button {
text-align: center;
margin: 0 auto;
}
.open-button button {
background-color: #35898f;
color: white;
border: 0;
padding: 0.7em 1.1em;
border-radius: 1.3em;
cursor: pointer;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 0.9rem;
}
.delete-dialog {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.1);
border-radius: 0.8em;
}
/* body overlay color when the dialog shows up */
.delete-dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
.delete-dialog-container {
display: flex;
flex-direction: column;
padding: 1.2em;
}
.trash-icon {
width: 2rem;
height: 2rem;
}
.heading {
display: flex;
align-items: center;
text-align: center;
}
.heading h5 {
font-size: 1.2rem;
padding-left: 0.6em;
font-family: "Roboto", sans-serif;
font-weight: 700;
}
.delete-dialog p {
font-size: 1.1rem;
font-family: "Roboto", sans-serif;
padding: 1em 0;
}
.dialog-buttons {
margin-left: auto;
padding: 0.1em 0;
}
.dialog-button {
color: white;
border: 0;
padding: 0.5em 1.1em;
border-radius: 0.6em;
border-width: 0.2em;
border-style: solid;
cursor: pointer;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 0.85rem;
}
.cancel-button {
background-color: white;
border-color: #35898f;
color: #35898f;
}
.delete-button {
background-color: #f00;
border-color: #f00;
margin-left: 0.5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<br />
<div class="open-button">
<button onclick="openDialogButtonClick()">Open Dialog</button>
<br />
<br />
<p id="dialog-button-clicks-text"></p>
</div>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
laudantium et distinctio ea rem libero exercitationem inventore sed, illo
aperiam consequuntur, iste repudiandae quia id nobis eum alias. Corporis,
exercitationem.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo laudantium et distinctio ea rem libero exercitationem inventore
sed, illo aperiam consequuntur, iste repudiandae quia id nobis eum alias.
Corporis, exercitationem.
</p>
<dialog class="delete-dialog">
<div class="delete-dialog-container">
<div class="heading">
<img src="./dialog1/trash-2.svg" class="trash-icon" />
<h5>Delete Item?</h5>
</div>
<p>Are you sure you want to delete this item from the list?</p>
<div class="dialog-buttons">
<button
class="dialog-button cancel-button"
onclick="cancelButtonClick()"
>
Cancel
</button>
<button
class="dialog-button delete-button"
onclick="deleteButtonClick()"
>
Delete
</button>
</div>
</div>
</dialog>
<script>
var deleteDialog = document.querySelector(".delete-dialog");
var dialogButtonClicksText = document.getElementById(
"dialog-button-clicks-text"
);
function openDialogButtonClick() {
if (typeof deleteDialog.showModal === "function") {
deleteDialog.showModal();
} else {
dialogButtonClicksText.innerHTML = "Dialog API is not supported";
}
}
function cancelButtonClick() {
dialogButtonClicksText.innerHTML = "Cancel Button Click";
deleteDialog.close();
}
function deleteButtonClick() {
dialogButtonClicksText.innerHTML = "Delete Button Click";
deleteDialog.close();
}
</script>
</body>
</html>