This code provides a simple implementation of a modal using pure CSS, with the help of the <summary> and <details> HTML tags. The core functionality is achieved by nesting a modal inside the details element, ensuring that the modal is automatically shown when the details are opened.
Additionally, by nesting the overlay inside the summary element, users can use it to trigger the modal’s close. The modal features a close button represented by an “X” icon, and clicking either the close button or the overlay will dismiss the modal.
This pure CSS approach offers an easy and effective way to display additional information or content in a modal-like format, enhancing the styling of the <details> element. The modal design is customizable and can be tailored to fit various use cases, providing a clean and elegant solution for presenting supplementary content on a web page.
How to Create Pure CSS Modal Using Summary And Details Tags
1. Create the HTML structure for the modal as follows:
<div class="container">
<h1>
Making the <code><details></code> element look and behave like a modal<sup>(kinda..)</sup>
</h1>
<p>By nesting a modal inside a details element it is automaticly shown when the details is opened. And by nesting the overlay inside the summary element, we can use that to trigger a close.</p>
<details>
<summary>
<div class="button">
Show me the modal
</div>
<div class="details-modal-overlay"></div>
</summary>
<div class="details-modal">
<div class="details-modal-close">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
</svg>
</div>
<div class="details-modal-title">
<h1>My details modal</h1>
</div>
<div class="details-modal-content">
<p>
You can click the X in the corner or click the overlay to close this modal.
Something like this could be useful as a nice way to show additional information,
but that's about as far as I would take it. It's just a nice way of styling the details element.
</p>
</div>
</div>
</details>
</div>
2. Style the modal using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f9fafb;
font-size: 70%;
line-height: 1.4;
font-family: "Inter", sans-serif;
color: #6b7280;
font-weight: 400;
}
@media only screen and (min-width: 600px) {
body {
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
font-size: 100%;
}
}
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #16a34a;
border-radius: 0.25em;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 3em;
line-height: 3em;
padding: 0 1em;
}
.button:hover {
background-color: #17ac4e;
}
.details-modal {
background: #ffffff;
border-radius: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
max-width: 90%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 30em;
text-align: left;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.details-modal .details-modal-close {
align-items: center;
color: #111827;
display: flex;
height: 4.5em;
justify-content: center;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 4.5em;
}
.details-modal .details-modal-close svg {
display: block;
}
.details-modal .details-modal-title {
color: #111827;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.details-modal .details-modal-title h1 {
font-size: 1.25rem;
font-weight: 600;
line-height: normal;
}
.details-modal .details-modal-content {
border-top: 1px solid #e0e0e0;
padding: 2em;
pointer-events: all;
overflow: auto;
}
.details-modal-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(15, 23, 42, 0.8);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .details-modal-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary {
list-style: none;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.container {
text-align: center;
max-width: 40em;
padding: 2em;
}
.container > h1 {
font-weight: 700;
font-size: 2rem;
line-height: normal;
color: #111827;
}
.container > p {
margin-top: 2em;
margin-bottom: 2em;
}
.container sup {
font-size: 1rem;
margin-left: 0.25em;
opacity: 0.5;
position: relative;
}
The CSS styles provide the necessary layout and appearance for our modal. The .details-modal class is used to style the modal container, while the .details-modal-close class handles the close button styling.
The .details-modal-overlay class creates a transparent overlay that appears when the modal is open.
That’s it! hopefully, you have successfully created Pure Css Modal Using Summary And Details Tags. If you have any questions or suggestions, feel free to comment below.
