Azul Coding
When to Use HTML Dialogs vs Popovers
index.html
<!-- AZUL CODING --------------------------------------- -->
<!-- When to Use HTML Dialogs vs Popovers -->
<!-- https://youtu.be/epsaMIhB1eE -->
<!DOCTYPE html>
<html>
<head>
<title>Azul Coding</title>
<style>
body {
margin: 30px;
background-color: #03506E;
display: flex;
align-items: center;
min-height: calc(100vh - 60px);
}
* {
font-family: 'Golos Text', system-ui, sans-serif;
font-weight: 500;
font-size: 18px;
}
h2 {
font-size: 32px;
font-weight: 700;
}
h2, p {
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 50px;
}
img {
background-color: #49c8fc;
border: 3px solid #49c8fc;
max-width: 100%;
object-fit: cover;
}
#price {
font-size: 22px;
margin-bottom: 10px;
}
#price + .link {
margin-top: 0;
margin-bottom: 30px;
}
button {
background-color: white;
color: #03506E;
border: none;
padding: 6px 12px;
cursor: pointer;
display: block;
}
button:hover {
background-color: #49c8fc;
}
button.link {
background: none;
border: none;
padding: 0;
color: #49c8fc;
text-decoration: underline;
text-underline-offset: 5px;
cursor: pointer;
font-size: 14px;
}
button.link:hover {
color: white;
}
#size-guide-link {
margin-top: -10px;
margin-bottom: 20px;
}
select {
background: white;
color: #03506E;
min-width: 50px;
margin-bottom: 20px;
}
table {
border: none;
width: 100%;
margin: 20px auto;
color: white;
}
th {
font-weight: 700;
text-align: left;
}
th, td {
padding: 8px;
}
/* dialog styles */
@keyframes scale-in {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
dialog[open] {
background-color: #03506E;
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
padding: 0;
border: 2px solid white;
animation: scale-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
}
dialog[open] .dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
}
dialog[open]::backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
animation: fade-in 0.3s ease-out both;
}
dialog[open] form {
padding: 15px;
max-width: 600px;
}
dialog[open] h2 {
margin: 10px;
}
dialog[open] p {
padding: 0 10px;
}
dialog[open] .close-btn {
font-size: 36px;
padding: 20px 10px;
line-height: 0;
margin-right: 10px;
}
/* popover styles */
#installments-link {
anchor-name: --anchor_link;
}
[popover] {
background: #333;
border: 2px solid #49c8fc;
padding: 20px;
max-width: 200px;
position: absolute;
position-anchor: --anchor_link;
top: anchor(--anchor_link bottom);
left: anchor(--anchor_link left);
margin: 10px 0 0 0;
transform: translateY(50px);
opacity: 0;
transition: transform 0.5s, opacity 0.5s, display 0.5s;
transition-behavior: allow-discrete;
}
[popover]:popover-open {
transform: translateY(0);
opacity: 1;
@starting-style {
transform: translateY(20px);
opacity: 0;
}
}
[popover] p {
font-size: 16px;
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<dialog id="size-guide-dialog">
<form method="dialog">
<div class="dialog-header">
<h2>Size guide</h2>
<button type="submit" class="close-btn" title="Close">×</button>
</div>
<table>
<thead>
<tr>
<th>Size</th>
<th>Chest (inches)</th>
<th>Waist (inches)</th>
<th>Length (inches)</th>
</tr>
</thead>
<tbody>
<tr>
<td>XS</td>
<td>32-34</td>
<td>26-28</td>
<td>27</td>
</tr>
<tr>
<td>S</td>
<td>35-37</td>
<td>29-31</td>
<td>28</td>
</tr>
<tr>
<td>M</td>
<td>38-40</td>
<td>32-34</td>
<td>29</td>
</tr>
<tr>
<td>L</td>
<td>41-43</td>
<td>35-37</td>
<td>30</td>
</tr>
<tr>
<td>XL</td>
<td>44-46</td>
<td>38-40</td>
<td>31</td>
</tr>
</tbody>
</table>
</form>
</dialog>
<div id="installments-popover" popover>
<p>You can split the cost by paying in 4 easy installments.</p>
<button class="link" popovertarget="installments-popover" popovertargetaction="hide">
Close
</button>
</div>
<div class="container">
<img src="mockup.png" width="400" height="400" alt="A blue T-shirt with the Azul Coding logo on it">
<div>
<h2>Azul Coding T-Shirt</h2>
<p id="price">$ 29.99</p>
<button class="link" id="installments-link" popovertarget="installments-popover">
Pay in installments
</button>
<hr>
<p><label for="size">Select a size:</label></p>
<button class="link" id="size-guide-link">Size guide</button>
<select name="size">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="M">L</option>
<option value="M">XL</option>
</select>
<hr>
<button>Add to cart</button>
</div>
</div>
<script>
const dialog = document.getElementById("size-guide-dialog");
const sizeGuideLink = document.getElementById("size-guide-link");
sizeGuideLink.addEventListener("click", () => {
dialog.showModal();
});
dialog.addEventListener("click", (event) => {
if (event.target === dialog)
dialog.close();
});
</script>
</body>
</html>
