Table of Contents
- Use HTML dialog tag
- Style the HTML dialog and backdrop
- Open and Close the HTML dialog using JavaScript
- Video Tutorial
- You may like:
HTML dialog tag makes it easier to display a popup or modal. Check the sample dialog box below:
Use HTML dialog tag
<!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>HTML, CSS & JS Dialog</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="para">
<h1> This is paragraph 1 </h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ad temporibus. Architecto iure iste veniam alias eum deleniti praesentium odio. Voluptatibus quam odit at nesciunt id facere blanditiis doloribus ad est maxime ducimus tempora vero officiis aliquam soluta, ipsam consequuntur architecto eius in. Fugiat quasi, excepturi, iusto fuga quo dolorum voluptates beatae velit optio possimus autem nostrum sunt repudiandae assumenda dignissimos at dolore itaque delectus vitae, veniam tempora inventore ratione. Reiciendis, reprehenderit fuga assumenda accusamus harum, nostrum saepe veniam delectus libero error magnam? Blanditiis deserunt perferendis distinctio veniam asperiores praesentium ad illo explicabo cumque, amet modi, eligendi mollitia ipsum voluptatem.
</p>
</div>
<div class="para">
<h1> This is paragraph 2 </h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ad temporibus. Architecto iure iste veniam alias eum deleniti praesentium odio. Voluptatibus quam odit at nesciunt id facere blanditiis doloribus ad est maxime ducimus tempora vero officiis aliquam soluta, ipsam consequuntur architecto eius in. Fugiat quasi, excepturi, iusto fuga quo dolorum voluptates beatae velit optio possimus autem nostrum sunt repudiandae assumenda dignissimos at dolore itaque delectus vitae, veniam tempora inventore ratione. Reiciendis, reprehenderit fuga assumenda accusamus harum, nostrum saepe veniam delectus libero error magnam? Blanditiis deserunt perferendis distinctio veniam asperiores praesentium ad illo explicabo cumque, amet modi, eligendi mollitia ipsum voluptatem.
</p>
<button class="open-modal">Open Dialog</button>
</div>
<dialog class="dialog">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae veritatis blanditiis vero voluptatem, sint suscipit consectetur quas tempore at eius, magni animi beatae. Dicta enim vero eaque velit harum ab!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae veritatis blanditiis vero voluptatem, sint suscipit consectetur quas tempore at eius, magni animi beatae. Dicta enim vero eaque velit harum ab!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae veritatis blanditiis vero voluptatem, sint suscipit consectetur quas tempore at eius, magni animi beatae. Dicta enim vero eaque velit harum ab!
</p>
<button class="close-modal">Close</button>
</dialog>
<script src="script.js"></script>
</body>
</html>Style the HTML dialog and backdrop
.para {
font-size: 1.2em;
line-height: 1.5em;
padding: 0;
width: 60%;
margin: 0 auto;
}
/* open and close buttons */
.open-modal,
.close-modal {
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
font-size: 1.2em;
font-weight: bold;
margin: 0 0 1.5em 0;
padding: 0.5em 1em;
}
/* dialog/popup */
.dialog {
max-width: 40%;
font-size: 1.2rem;
border: none;
box-shadow: 0 0 0.75rem #555;
}
/* backdrop */
.dialog::backdrop {
background: linear-gradient(125deg, purple, yellow);
opacity: 0.7;
}Open and Close the HTML dialog using JavaScript
const openModal = document.querySelector('.open-modal');
const closeModal = document.querySelector('.close-modal');
const dialog = document.querySelector('dialog');
openModal.addEventListener('click', () => {
dialog.showModal();
});
closeModal.addEventListener('click', () => {
dialog.close();
});
Video Tutorial
Video Tutorial will be added soon. Find other projects and tutorials at:
https://youtube.com/@developeranil